CSS3 多列布局

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

由於 column 屬性集尚未納入標準，大多數瀏覽器必須使用廠商前綴才能訪問，好在主流的瀏覽器都可以很好的支持了。下面是主流瀏覽器的支持和前綴情況。

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

屬性解釋
為了方便演示，我們在 Firefox 火狐瀏覽器測試，只用-moz-前綴演示。
1.columns
columns 是一個復合屬性，包含 columns-width 和 columns-count 這兩種簡寫。意為同時設置分列列數和分列寬度。

//分成四列，每列寬度自適應
-moz-columns: auto 4;

2.column-width
column-width 屬性，用於設置每列的寬度。
//設置列寬

-moz-column-width: 200px;
這裏設置了 200px，有點最小寬度的意思。當瀏覽器縮放到小於 200 大小時，將變成 1
列顯示。而如果是 auto，則一直保持四列。

3.column-count
column-count 屬性，用於設置多少列。
//設置列數
-moz-column-count: 4;

4.column-gap
column-gap 屬性，用於設置列間距
//設置列間距
-moz-column-gap: 100px;

5.column-rule

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

列邊線不會影響到布局，它會根據布局的縮放自我調整是否顯示。如果我們把頁面縮放 到只能顯示一列時，它自動消失了。

6.column-span
column-span 屬性，設置跨列大標題。
//跨列標題，由於火狐尚未支持，固使用 webkit
-webkit-column-span: all;

CSS3 多列布局