|
2) CSS3 定義。W3C 中有講述關(guān)于多列布局的文檔，排列出來的樣子:
由 chrome/ff 瀏覽器直接渲染出來，可以指定容器的列個(gè)數(shù)，列間距，列中間邊框，列寬度來實(shí)現(xiàn)；
#container {
-webkit-column-count: 5；
/*-webkit-column-gap: 10px；
-webkit-column-rule: 5px solid #333；
-webkit-column-width: 210px；*/
-moz-column-count: 5；
/*-moz-column-gap: 20px；
-moz-column-rule: 5px solid #333；
-moz-column-width: 210px；*/
column-count: 5；
/*column-gap: 10px；
column-rule: 5px solid #333；
column-width: 210px；*/
}
- column-count 為列數(shù)； column-gap 為每列間隔距離； column-rule 為間隔邊線大��； column-width 為每列寬度； 當(dāng)只設(shè)置 column-width 時(shí)，瀏覽器窗口小于一列寬度時(shí)，列中內(nèi)容自動(dòng)隱藏； 當(dāng)只設(shè)置 column-count 時(shí)，平均計(jì)算每列寬度，列內(nèi)內(nèi)容超出則隱藏； 都設(shè)了 column-count 和column-width，瀏覽器會(huì)根據(jù) count 計(jì)算寬度和 width 比較，取大的那個(gè)值作為每列寬度，然后當(dāng)窗口縮小時(shí)，width 的值為每列最小寬度。這邊其實(shí)很簡(jiǎn)單，簡(jiǎn)易自己嘗試下，詳細(xì)可參考 https://developer.mozilla.org/en/CSS3_Columns 中的說明。 a href="
- 線上例子。
優(yōu)點(diǎn):
- 直接 CSS 定義，最方便了；
- 擴(kuò)展方便，直接往容器里添加內(nèi)容即可。
缺點(diǎn):
- 只有高級(jí)瀏覽器中才能使用；
- 還有一個(gè)缺點(diǎn)，他的數(shù)據(jù)塊排列是從上到下排列到一定高度后，再把剩余元素依次添加到下一列，這個(gè)本質(zhì)上就不一樣了；
- 鑒于這兩個(gè)主要缺點(diǎn)，注定了該方法只能局限于高端瀏覽器，而且，更適合于文字多欄排列。
出處：taobaoued
責(zé)任編輯：bluehearts
上一頁(yè) 瀑布流布局淺析 [1] 下一頁(yè) 瀑布流布局淺析 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 瀑布流布局淺析 [2]
