- 摩刻部落 - https://www.moke.tw/wordpress -

CSS3與濾境(13)-多欄設定

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

屬性名稱

columns [1](分欄設定):column-width [2](欄位寬度)、column-count [3](分欄數量)
column-rule [4](間隔線樣式):column-rule-width [5](間隔線粗細)、column-rule-style [6](間隔線條樣式)、column-rule-color [7](間隔線顏色)
column-gap [8](間隔距離)、column-span [9](横跨欄位)、column-fill [10](填充方式)

columns
說明:分欄設定,可以指定欄位寬度與分成幾欄。不過目前無法正常顯示結果。Chrome和Safari會等同column-count語法,Opera則等同column-width語法的結果。

屬性值:column-width column-count

【範例】

.box {
	columns:50px 3;		/* 不支援IE與Firefox瀏覽器 */
	-webkit-columns:50px 3;	/* Chrome、Safari 使用的語法 */
}

【結果】

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。
回到【屬性名稱】 [11]

column-count
說明:將網頁內容分成數欄顯示。

屬性值:(數值)、auto(自動)

【範例】

.box {
	column-count:3;		/* 不支援IE瀏覽器 */
	-moz-column-count:3;	/* Firefox 使用的語法 */
	-webkit-column-count:3;	/* Chrome、Safari 使用的語法 */
}

【結果】

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。
回到【屬性名稱】 [11]

column-fill
說明:指定分欄內容的填充方式,每個欄位盡量相同,或依序填充,允許不同長度。目前沒有任何瀏覽器支援。此語法不提供範例結果。

屬性值:balance(平等)、auto(依序填充)

【範例】

.box {
	column-fill:balance;	/* 不支援任何瀏覽器 */
}
回到【屬性名稱】 [11]

column-gap
說明:指定欄與欄之間的距離。

屬性值:(長度)、normal(W3C建議1em)

【範例】

.box {
	column-count:3;		/* 不支援IE瀏覽器 */
	-moz-column-count:3;	/* Firefox 使用的語法 */
	-webkit-column-count:3;	/* Chrome、Safari 使用的語法 */

	column-gap:20px;		/* 不支援IE瀏覽器 */
	-moz-column-gap:20px;		/* Firefox 使用的語法 */
	-webkit-column-gap:20px;	/* Chrome、Safari 使用的語法 */
}

【結果】

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。
回到【屬性名稱】 [11]

column-rule
說明:設定欄位間隔線的樣式。

屬性值:column-rule-width column-rule-style column-rule-color

【範例】

.box {
	column-count:3;		/* 不支援IE瀏覽器 */
	-moz-column-count:3;	/* Firefox 使用的語法 */
	-webkit-column-count:3;	/* Chrome、Safari 使用的語法 */

	column-rule:3px outset blue;		/* 不支援IE瀏覽器 */
	-moz-column-rule:3px outset blue;	/* Firefox 使用的語法 */
	-webkit-column-rule:3px outset blue;	/* Chrome、Safari 使用的語法 */
}

【結果】

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。
回到【屬性名稱】 [11]

column-rule-color
說明:設定欄位間隔線的顏色。

屬性值:(顏色)

【範例】

.box {
	column-count:3;		/* 不支援IE瀏覽器 */
	-moz-column-count:3;	/* Firefox 使用的語法 */
	-webkit-column-count:3;	/* Chrome、Safari 使用的語法 */

	column-rule-style:dashed;		/* 不支援IE瀏覽器 */
	-moz-column-rule-style:dashed;		/* Firefox 使用的語法 */
	-webkit-column-rule-style:dashed;	/* Chrome、Safari 使用的語法 */

	column-rule-color:green;		/* 不支援IE瀏覽器 */
	-moz-column-rule-color:green;		/* Firefox 使用的語法 */
	-webkit-column-rule-color:green;	/* Chrome、Safari 使用的語法 */
}

【結果】

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。
回到【屬性名稱】 [11]

column-rule-style
說明:設定欄位間隔線的線條樣式。3D線條的顯示效果會受顏色和寬度影響。

屬性值:none(無)、hidden(隱藏)、dotted(點)、dashed(短線)、solid(實線)、double(雙實線)、groove(3D凹線)、ridge(3D凸線)、inset(3D內側)、outset(3D外側)

【範例】

.box {
	column-count:3;		/* 不支援IE瀏覽器 */
	-moz-column-count:3;	/* Firefox 使用的語法 */
	-webkit-column-count:3;	/* Chrome、Safari 使用的語法 */

	column-rule-style:double;		/* 不支援IE瀏覽器 */
	-moz-column-rule-style:double;		/* Firefox 使用的語法 */
	-webkit-column-rule-style:double;	/* Chrome、Safari 使用的語法 */
}

【結果】

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。
回到【屬性名稱】 [11]

column-rule-width
說明:設定欄位間隔線的粗細。

屬性值:(長度)、thin(細)、medium(中)、thick(粗)

【範例】

.box {
	column-count:3;		/* 不支援IE瀏覽器 */
	-moz-column-count:3;	/* Firefox 使用的語法 */
	-webkit-column-count:3;	/* Chrome、Safari 使用的語法 */

	column-rule-style:solid;		/* 不支援IE瀏覽器 */
	-moz-column-rule-style:solid;		/* Firefox 使用的語法 */
	-webkit-column-rule-style:solid;	/* Chrome、Safari 使用的語法 */

	column-rule-width:1px;		/* 不支援IE瀏覽器 */
	-moz-column-rule-width:1px;	/* Firefox 使用的語法 */
	-webkit-column-rule-width:1px;	/* Chrome、Safari 使用的語法 */
}

【結果】

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。
回到【屬性名稱】 [11]

column-span
說明:允許指定元素横跨欄位。

屬性值:1(只能在一欄中)、all(横跨所有欄位)

【範例】

h4 {
	column-span:all;		/* 不支援IE、Firefox與Safari瀏覽器 */
	-webkit-column-span:all;	/* Chrome 使用的語法 */
}
.box {
	column-count:3;		/* 不支援IE瀏覽器 */
	-moz-column-count:3;	/* Firefox 使用的語法 */
	-webkit-column-count:3;	/* Chrome、Safari 使用的語法 */
}

【結果】

CSS3與濾境(13)-多欄設定

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

回到【屬性名稱】 [11]

column-width
說明:設定分欄的欄位寬度。

屬性值:(長度)、auto(自動)

【範例】

.box {
	column-width:50px;		/* 不支援IE瀏覽器 */
	-moz-column-width:50px;		/* Firefox 使用的語法 */
	-webkit-column-width:50px;	/* Chrome、Safari 使用的語法 */
}

【結果】

在 MS Word 裡有分欄的功能,可以把一段文字分成二欄顯示。現在CSS語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。
回到【屬性名稱】 [11]