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

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

屬性名稱

columns(分欄設定):column-width(欄位寬度)、column-count(分欄數量)

column-rule(間隔線樣式):column-rule-width(間隔線粗細)、column-rule-style(間隔線條樣式)、column-rule-color(間隔線顏色)

column-gap(間隔距離)、column-span(横跨欄位)、column-fill(填充方式)

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語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

column-count

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

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

【範例】

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

【結果】

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

column-fill

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

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

【範例】

.box {
    column-fill:balance;    /* 不支援任何瀏覽器 */
}

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語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

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語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

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語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

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語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

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語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

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語法也提供這種分欄的排版方式,我們可以很輕鬆地把一段文字分成好幾欄顯示。

column-width

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

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

【範例】

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

【結果】

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