CSS3多列布局

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

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

語法及兼容性

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

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

其兼容性如下圖，

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

示例

讓我們先來看個簡單的示例，

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

打開這個demo，看一下效果。其效果如下圖，

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

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

我們再來看看column-span屬性。此屬性目前只能有兩個可取值：none或者all，標識某一元素要么不進行跨列要么就跨了所有的列。具體的效果可以參見這個demo，其效果如下，

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

簡化語法

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/