多欄
該特性使生活更加容易,呵呵。這個新特性允許網頁設計師將文字填入欄中。這可以通過兩種方法實現(xiàn),定義各欄的寬度,或者是定義欄數(shù)。
多欄布局目前只支持Mozilla核心的瀏覽器和Safari 3, 它們支持各自的屬性前綴 -moz-和-webkit-。下面的例子使用欄寬:
-moz-column-width: 13em; -webkit-column-width: 13em; -moz-column-gap: 1em; -webkit-column-gap: 1em;
下一個例子使用欄數(shù):
-moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black;
這兩個例子輸出如下:
還有一個特性尚未生效,它就是“column-space-distribution”,這個屬性可以描述當頁面中還有剩余空間時如何分配欄目之間的間距。
以上文章轉自:http://www.qianduan.net/?p=755
關于CSS3 中的 Gird 布局
我們看看下面這張圖:
圖中藍色的線不會出現(xiàn)在實際的網頁中。對于這個布局復雜的三欄網頁來說,如果使用 CSS3 Gird 布局的話,我們只需這樣寫:
body { columns:3; column-gap:0.5in; } img { float:page top right; width:3gr; }
其中,body 部分聲明頁面為 3 欄,欄間距為 0.5英寸;img 中 float 屬性指明圖片浮動位置為頁面的右上角(CSS3 定位好強大 -__-),而寬度為 3 個欄寬。只需這樣兩行 CSS,我們就可以實現(xiàn)這個復雜的布局了。真的很神奇。
Gird 布局是好,不過如果你認為它很簡單的話,你就大錯特錯了?纯 w3c 中關于它的介紹,你會發(fā)現(xiàn)理解它的意義不亞于看懂天書。好在還是個草案,但愿它到了正式版的時候,能夠更加簡單易用點。
Gird 布局應用很廣泛,最簡單的例子就是內容的分欄顯示。但這個 CSS3 特性目前還沒有任何瀏覽器可以支持它。誰要是能第一個支持它(以及其它 CSS3 草案),那就酷斃了。不知道,最近異常低調的 IE8,會不會是這第一個吃螃蟹的人呢?
出處:藍色理想
責任編輯:bluehearts
上一頁 CSS3新特性 [1] 下一頁 CSS3新特性 [3]
◎進入論壇網頁制作、WEB標準化版塊參加討論,我還想發(fā)表評論。
|