CSS3 多列

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

入門教程 - 學的不僅是技術，更是夢想！入門教程(www.itread01.com)提供了最全的程式設計技術基礎教程, 介紹了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各種程式語言的基礎知識。 同時本站中也提供了大量的線上例項，通過例項，您可以更好的學習程式設計。

瀏覽器支援

表格中的數字表示支援該方法的第一個瀏覽器的版本號。

緊跟在數字後面的 -webkit- 或 -moz- 為指定瀏覽器的字首。

屬性
column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1

CSS3 多列屬性

本章節我們將學習以下幾個 CSS3 的多列屬性:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

CSS3 建立多列

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

以下例項將 <div> 元素中的文字分為 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;
}

嘗試一下 ?

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

例項

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

嘗試一下 ?

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

例項

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

嘗試一下 ?

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

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

例項

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

嘗試一下 ?

指定元素跨越多少列

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

例項

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

嘗試一下 ?

指定列的寬度

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

例項

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

嘗試一下 ?

CSS3 多列屬性

下表列出了所有 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 的簡寫屬性。