CSS3 多列布局

屬性及版本
CSS3 提供了 columns 多列布局屬性等 7 個(gè)屬性集合，具體如下：

由于 column 屬性集尚未納入標(biāo)準(zhǔn)，大多數(shù)瀏覽器必須使用廠商前綴才能訪問(wèn)，好在主流的瀏覽器都可以很好的支持了。下面是主流瀏覽器的支持和前綴情況。

通過(guò)上面的表格，我們可以了解到，要想讓最新的瀏覽器全部實(shí)現(xiàn)效果，都必須使用前
綴。
//完×××式
-webkit-columns: 150px 4;
-moz-columns: 150px 4; columns: border-box;

屬性解釋
為了方便演示，我們?cè)?Firefox 火狐瀏覽器測(cè)試，只用-moz-前綴演示。
1.columns
columns 是一個(gè)復(fù)合屬性，包含 columns-width 和 columns-count 這兩種簡(jiǎn)寫(xiě)。意為同時(shí)設(shè)置分列列數(shù)和分列寬度。
//分成四列，每列寬度自適應(yīng)
-moz-columns: auto 4;

2.column-width
column-width 屬性，用于設(shè)置每列的寬度。
//設(shè)置列寬

-moz-column-width: 200px;
這里設(shè)置了 200px，有點(diǎn)最小寬度的意思。當(dāng)瀏覽器縮放到小于 200 大小時(shí)，將變成 1
列顯示。而如果是 auto，則一直保持四列。

3.column-count
column-count 屬性，用于設(shè)置多少列。
//設(shè)置列數(shù)
-moz-column-count: 4;

4.column-gap
column-gap 屬性，用于設(shè)置列間距
//設(shè)置列間距
-moz-column-gap: 100px;

5.column-rule
column-rule 屬性，設(shè)置每列中間的分割線
//設(shè)置列邊線
-moz-column-rule: 2px dashed gray;

列邊線不會(huì)影響到布局，它會(huì)根據(jù)布局的縮放自我調(diào)整是否顯示。如果我們把頁(yè)面縮放 到只能顯示一列時(shí)，它自動(dòng)消失了。

6.column-span
column-span 屬性，設(shè)置跨列大標(biāo)題。
//跨列標(biāo)題，由于火狐尚未支持，固使用 webkit
-webkit-column-span: all;