3. 多欄布局
這是新的CSS3 選擇器可以讓你不用使用多個div標簽就能實現(xiàn)多欄布局。瀏覽器解釋這個屬性并生成多欄，讓文本實現(xiàn)一個仿報紙的多欄結(jié)構(gòu)。
tweetCC 在其首頁使用了CSS3 多欄選擇器
tweetCC 在其首頁上將介紹文字顯示為四欄。這四欄并非浮動的div；相反，設計師使用下面的CSS3 多欄布局：
.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}
我們可以通過這個選擇器定義三件事情：欄數(shù)(column-coun)、欄寬(column-width、例子中沒有用到)和各欄之間的空白/間距(column-gap)。 如果column-count未設定，瀏覽器會在允許的寬度內(nèi)容納盡可能多的欄目。
為了在各欄時間添加一個數(shù)值的分隔，我們可以使用column-rule 屬性，其功能和border 屬性類似: div {
column-rule: 1px solid #00000;
} 上面的這條屬性，瀏覽器中不會看到任何效果，因為它沒有分欄，如果配合上面的例子就可以了。
相關(guān)屬性: column-break-after, column-break-before, column-span, column-fill.
瀏覽器支持: 多欄布局目前被Safari 3+，chrome，和Firefox 1.5+所支持。
擴展閱讀：
出處：藍色理想
責任編輯：bluehearts
上一頁 RGBA和透明度 下一頁 多背景圖
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 3 頁 多欄布局
