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