CSS3多列布局

注意：由于CSS3中的部分內(nèi)容尚未完全定稿，所以本文的部分可能會(huì)隨時(shí)更新。

CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀布局模式的有力擴(kuò)充。這種新語法能夠讓W(xué)EB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示。本文將會(huì)詳細(xì)闡述column屬性的相關(guān)用法。

語法及兼容性

除了上述的幾個(gè)常用的屬性之外，還有

• column-fill屬性，此屬性用于標(biāo)識(shí)分列的高度是否統(tǒng)一。不過博主在Chrome41上實(shí)驗(yàn)時(shí)貌似還不支持。
• break-before、break-after、break-inside屬性，這三個(gè)屬性是用于標(biāo)識(shí)分列之間的行為的。這三個(gè)屬性目前來說并不常用。

其兼容性如下圖，

不出所料，IE9及其以下的瀏覽器是不支持的。而且column目前并不完全支持W3C的標(biāo)準(zhǔn)語法，需要針對(duì)不同的瀏覽器內(nèi)核添加不同的前綴。（下面的示例中將默認(rèn)使用-webkit-前綴）

示例

讓我們先來看個(gè)簡(jiǎn)單的示例，

<style>
    div {
        -webkit-column-count: 3;
        -webkit-column-width: 100px;
        -webkit-column-rule: 10px solid red;
        -webkit-column-gap: 20px;
    }
</style>
<div>
    blablabla.....
</div>

打開這個(gè)demo，看一下效果。其效果如下圖，

此時(shí)，我們?nèi)绻⑨尩鬰ss代碼中的column-count或者column-width屬性，得到的結(jié)果是不一樣的。各位看客可在給出的demo鏈接中自行實(shí)驗(yàn)。

結(jié)論：其實(shí)column-width并不是必須的，瀏覽器會(huì)自動(dòng)根據(jù)column-count和column-width計(jì)算出自適應(yīng)的布局。上面的代碼中我們?cè)O(shè)置column-width為100px，column-count為3列，得到的結(jié)果雖然是分成了3列，但是每一列的寬度并不是100px。

我們?cè)賮砜纯?code>column-span屬性。此屬性目前只能有兩個(gè)可取值：none或者all，標(biāo)識(shí)某一元素要么不進(jìn)行跨列要么就跨了所有的列。具體的效果可以參見這個(gè)demo，其效果如下，

各位看官可自行將column-span屬性變更成none或者all觀察其效果變化。

簡(jiǎn)化語法

column-count及column-width屬性可以合并起來使用，如下

<style>
div {
    -webkit-columns: 3 15em
}
</style>
<div>
    blablabla......
</div>

其中columns: 3 15em與下面的寫法是等效的，

div {
    -webkit-column-count: 3;
    -webkit-column-width: 15em;
}

參考列表

• http://www.w3.org/TR/css3-multicol/