CSS3 多列再需要設計多個布局時是非常有用的。比如，報紙布局。 主要屬性如下： * column-count ： 指定元素的列數 * column-rule ： 指定的列之間的差距 * column-gap ： 設置列之間的寬度，樣式和顏色 例子： ~~~ .newspaper { column-count: 3; -moz-column-count: 3; /* Firefox */ -webkit-column-count: 3; /* Safari and Chrome */ column-gap: 40px; -moz-column-gap: 40px; /* Firefox */ -webkit-column-gap: 40px; /* Safari and Chrome */ column-rule: 4px outset #ff00ff; -moz-column-rule: 4px outset #ff00ff; /* Firefox */ -webkit-column-rule: 4px outset #ff00ff; /* Safari and Chrome */ } ~~~ ## 屬性 | 屬性 | 說明 | CSS | |-----|------|--------| | [column-count](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 指定元素應分為的列數 | 3 | | [column-fill](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 指定如何填充列 | 3 | | [column-gap](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 指定列之間差距 | 3 | | [column-rule](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 一個用于設置所有列規則的簡寫屬性 | 3 | | [column-rule-color](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 指定的列之間顏色規則 | 3 | | [column-rule-style](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 指定的列之間的樣式規則 | 3 | | [column-rule-width](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 指定的列之間的寬度規則 | 3 | | [column-span](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 指定一個元素應該橫跨多少列 | 3 | | [column-width](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 指定列的寬度 | 3 | | [columns](http://waylau.gitbooks.io/css3-tutorial/content/docs/Multiple%20Columns.html#) | 縮寫屬性設置列寬和列數 | 3 | ## 源碼 本文中所用例子源碼參見?[https://github.com/waylau/css3-tutorial](https://github.com/waylau/css3-tutorial)?中?`samples`?目錄下的 multiple_columns.html