CSS3 column-count 屬性


實例

把div元素中的文本劃分成三列:

div
{
column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
}


在此頁底部有更多的例子。

流覽器支持

表格中的數字表示支持該屬性的第一個流覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個流覽器版本號。

屬性
column-count 50.0
4.0 -webkit-
10.0 2.0 -moz- 9.0
3.1 -webkit-
37.0
15.0 -webkit
11.1

屬性定義及使用說明

column-count屬性指定某個元素應分為的列數。

默認值: auto
繼承: no
版本: CSS3
JavaScript 語法: object.style.columnCount=3


語法

column-count: number|auto;

說明
number 列的最佳數目將其中的元素的內容無法流出
auto 列數將取決於其他屬性,例如:"column-width"


Examples

Try it Yourself - Examples


在div元素的文本分成三列,並指定一個30像素的列之間的差距。


指定列之間的規則:寬度,樣式和顏色。


相關文章

CSS3 教學: CSS3 Multiple Columns