一、CSS3 多列

CSS3 可以將文字內容設計成像報紙一樣的多列布局，IE10及以上支援。如下例項:

1、所有 CSS3 的多列屬性：

• column-count ： 指定元素應該被分割的列數。
• column-fill ： 指定如何填充列
• column-gap ： 指定列與列之間的間隙
• column-rule ： 所有 column-rule-* 屬性的簡寫
• column-rule-color ： 指定兩列間邊框的顏色
• column-rule-style ： 指定兩列間邊框的樣式
• column-rule-width ： 指定兩列間邊框的厚度
• column-span ： 指定元素要跨越多少列
• column-width ： 指定列的寬度
• columns ： 設定 column-width 和 column-count 的簡寫

二、CSS3 建立多列

column-count 屬性指定了需要分割的列數。

以下例項將元素中的文字分為 3 列：

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

嘗試一下 »

三、CSS3 多列中列與列間的間隙

column-gap

以下例項指定了列與列間的間隙為 40 畫素：

    div {
        -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
        -moz-column-gap: 40px; /* Firefox */
        column-gap: 40px;
    }

嘗試一下 »

四、CSS3 列邊框

column-rule-style 屬性指定了列與列間的邊框樣式：

    div {
        -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
        -moz-column-rule-style: solid; /* Firefox */
        column-rule-style: solid;
    }
 

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss3_column-rule-
style)

column-rule-width 屬性指定了兩列的邊框厚度:

    div {
        -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
        -moz-column-rule-width: 1px; /* Firefox */
        column-rule-width: 1px;
    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss3_column-rule-
width)

column-rule-color 屬性指定了兩列的邊框顏色：

    div {
        -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
        -moz-column-rule-color: lightblue; /* Firefox */
        column-rule-color: lightblue;
    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss3_column-rule-
color)

column-rule 屬性是 column-rule-* 所有屬性的簡寫。

以下例項設定了列直接的邊框的厚度，樣式及顏色：

    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
        -moz-column-rule: 1px solid lightblue; /* Firefox */
        column-rule: 1px solid lightblue;
    }

嘗試一下 »

五、指定元素跨越多少列

以下例項指定元素跨越所有列：

    h2 {
        -webkit-column-span: all; /* Chrome, Safari, Opera */
        column-span: all;
    }

嘗試一下 »

六、指定列的寬度

column-width 屬性指定了列的寬度。

    div {
        -webkit-column-width: 100px; /* Chrome, Safari, Opera */
        column-width: 100px;
    }

嘗試一下 »