CSS3 多列布局

使用 CSS3,你可以在多列中拆分元素的文字內容。

建立多列布局

CSS3 引入了多列布局模組,用於以簡單有效的方式建立多個列布局。現在,你可以建立佈局,就像你在雜誌和報紙中看到的那樣,而不使用浮動框。下面是使用 CSS3 多列布局功能將一些文字拆分為三列的簡單示例。

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

設定列數或寬度

CSS 屬性 column-countcolumn-width 控制是否以及將顯示多少列。column-count 屬性設定 multicol 元素內的列數,而 column-width 屬性設定所需的列寬。

p {
    -webkit-column-width: 150px; /* Chrome, Safari, Opera */
       -moz-column-width: 150px; /* Firefox */
            column-width: 150px; /* Standard syntax */
}

注: column-width 描述列的最佳寬度。然而,根據可用空間,實際列寬可以更寬或更窄。此屬性不應與 column-count 屬性一起使用。

設定列間隙

你可以使用 column-gap 屬性控制列之間的間隙。每列之間應用相同的間隙。預設差距是正常的,相當於 1em

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
}

設定列規則

你還可以在列之間新增一條線,即使用 column-rule 屬性的規則。它是在單個宣告中設定規則的寬度,樣式和顏色的簡寫屬性。該 column-rule 屬性採用與 borderoutline 相同的值。

p {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 100px;
    -webkit-column-rule: 2px solid red;
    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 100px;
    -moz-column-rule: 2px solid red;
    /* Standard syntax */
    column-count: 3;
    column-gap: 100px;
    column-rule: 2px solid red;
}

注意: 列規則的寬度不會影響列框的寬度,但如果列規則比間隙寬,則相鄰的列框將與規則重疊。

CSS3 多列屬性

下表提供了所有多列屬性的簡要概述:

屬性 描述
column-count 指定多列元素內的列數。
column-fill 指定內容跨列的分佈方式。
column-gap 指定列之間的間隙。
column-rule 指定要在每列之間繪製的直線或規則。
column-rule-color 指定列之間規則的顏色。
column-rule-style 指定列之間規則的樣式。
column-rule-width 指定列之間規則的寬度。
column-span 指定元素跨越的列數。
column-width 指定列的最佳寬度。
columns 用於同時設定和屬性的簡寫屬性。 column-width column-count