CSS3 多列

CSS3 可以將文本內(nèi)容設(shè)計(jì)成像報(bào)紙一樣的多列布局，如下實(shí)例:

小白教程 - 行動(dòng)比思想更具有力量，加油追夢(mèng)人！小白教程()提供了最全的編程技術(shù)基礎(chǔ)教程, 介紹了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各種編程語(yǔ)言的基礎(chǔ)知識(shí)。同時(shí)本站中也提供了大量的在線實(shí)例，通過(guò)實(shí)例，您可以更好的學(xué)習(xí)編程。

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

緊跟在數(shù)字后面的 -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 多列屬性

本章節(jié)我們將學(xué)習(xí)以下幾個(gè) CSS3 的多列屬性:

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

CSS3 創(chuàng)建多列

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

以下實(shí)例將 <div> 元素中的文本分為 3 列：

實(shí)例

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

運(yùn)行代碼 ?

CSS3 多列中列與列間的間隙

column-gap 屬性指定了列與列間的間隙。

以下實(shí)例指定了列與列間的間隙為 40 像素：

實(shí)例

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

運(yùn)行代碼 ?

CSS3 列邊框

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

實(shí)例

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

運(yùn)行代碼 ?

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

實(shí)例

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

運(yùn)行代碼 ?

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

實(shí)例

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

運(yùn)行代碼 ?

column-rule 屬性是 column-rule-* 所有屬性的簡(jiǎn)寫(xiě)。

以下實(shí)例設(shè)置了列直接的邊框的厚度，樣式及顏色：

實(shí)例

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

運(yùn)行代碼 ?

指定元素跨越多少列

以下實(shí)例指定 <h2> 元素跨越所有列：

實(shí)例

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

運(yùn)行代碼 ?

指定列的寬度

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

實(shí)例

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

運(yùn)行代碼 ?

CSS3 多列屬性

下表列出了所有 CSS3 的多列屬性：

屬性	描述
column-count	指定元素應(yīng)該被分割的列數(shù)。
column-fill	指定如何填充列
column-gap	指定列與列之間的間隙
column-rule	所有 column-rule-* 屬性的簡(jiǎn)寫(xiě)
column-rule-color	指定兩列間邊框的顏色
column-rule-style	指定兩列間邊框的樣式
column-rule-width	指定兩列間邊框的厚度
column-span	指定元素要跨越多少列
column-width	指定列的寬度
columns	設(shè)置 column-width 和 column-count 的簡(jiǎn)寫(xiě)

其他擴(kuò)展

上一篇：CSS 合法顏色值下一篇：CSS initial 關(guān)鍵字