CSS3 多列
CSS3 多列
CSS3 可以將文本內容設計成像報紙一樣的多列布局，如下實例:
教程 - 學的不僅是技術，更是夢想！教程(www.sharebody.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-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
CSS3 創建多列
column-count 屬性指定了需要分割的列數。
以下實例將 <div> 元素中的文本分為 3 列：
實例
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
-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;
}
-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;
}
-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;
}
-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;
}
-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;
}
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
嘗試一下 »
指定元素跨越多少列
以下實例指定 <h2> 元素跨越所有列：
指定列的寬度
column-width 屬性指定了列的寬度。
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 的簡寫 |