第5章你一直期待的多列布局在我們經(jīng)常閱讀的報紙或雜志中，通常一個版面會分成多個列進行排版，傳統(tǒng)的表格布局或浮動布局總會遇到錯位問題，并且非常不靈活。CSS3提供的多列布局，使得這種排版有了新的解決方案。5.1多列布局基礎(chǔ)CSS3提供了新的多列布局，包括以下幾個方面：定義列數(shù)定義列寬定義列與列之間的間距定義列與列之間的間隔線定義欄目跨列5.1.1多列屬性columns CSS3新增的columns屬性，用于快速定義多列的列數(shù)目和每列的寬度。1.參數(shù)說明

columns:<column-width>||<column-count>;<column-width>：定義每列的寬度；<column-count>：定義多列的列數(shù)。 在實際布局的時候，所定義的多列的列數(shù)是最大列數(shù)。當外圍寬度不足時，多列的列數(shù)會適當減少，而每列的寬度會自適應(yīng)寬度，填滿整個范圍區(qū)域。5.1.1多列屬性columns2.示例介紹

/*設(shè)計為3列，每列寬度200px*/ -webkit-columns:200px3; columns:200px3;如果縮小瀏覽器窗體的寬度，則文章會變成2列或者1列，每列的高度盡可能一致，而每列的寬度會自適應(yīng)分配，不一定是200px。5.1.2列寬屬性column-width CSS3新增的column-width屬性，用于定義多列布局中每列的寬度。1.參數(shù)說明

column-width:auto|<length>;auto：列的寬度由瀏覽器決定；<length>：直接指定列的寬度，由浮點數(shù)和單位標識符組成的長度值，不可以為負值。5.1.2列寬屬性column-width2.示例介紹

/*每列寬度200px*/

-webkit-column-width:200px;

-moz-column-width:200px;

column-width:200px;

當窗口的大小改變時，列數(shù)會及時調(diào)整，列數(shù)不固定。5.1.3列數(shù)屬性column-count CSS3新增的column-count屬性，用于定義多列布局中的列數(shù)目。1.參數(shù)說明

column-count:auto|<number>;auto：列的數(shù)目由其他屬性決定，如column-width；<number>：直接指定列的數(shù)目，取值為大于0的整數(shù)，決定了多列的最大列數(shù)。5.1.3列數(shù)屬性column-count2.示例介紹

/*指定列的數(shù)目*/ -webkit-column-count:3;

-moz-column-count:3;

column-count:3;

當窗口的大小改變時，列寬會及時調(diào)整，列數(shù)固定不變。5.1.4列間距屬性column-gap CSS3新增的column-gap屬性，用于定義多列布局中列與列之間的距離。1.參數(shù)說明

column-gap:normal|<length>;normal：默認值，由瀏覽器默認的列間距，一般是1em；<length>：指定列與列之間的距離，有浮點數(shù)字和單位標識符組成，不可為負值。5.1.4列間距屬性column-gap2.示例介紹

/*指定列間距為3em*/

-webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em;

列與列之間的距離增加了很多，變得較為寬松了。

5.1.5定義列分隔線 CSS3新增的column-rule屬性，在多列布局中，用于定義列與列之間的分隔線。1.參數(shù)說明

column-rule:[column-rule-width]||[column-rule-style]||[column-rule-color];2.派生的子屬性<column-rule-width>：定義分隔線的寬度；<column-rule-style>：定義分隔線的樣式風格；<column-rule-color>：定義分隔線的顏色。5.1.5定義列分隔線3.示例介紹

/*指定列間距為3em*/

-webkit-column-rule:1pxsolid#666; -moz-column-rule:1pxsolid#666; column-rule:1pxsolid#666;5.1.6定義橫跨所有列 CSS3新增的column-span屬性，在多列布局中，用于定義元素跨列顯示。1.參數(shù)說明

column-span:1|all;1：默認值，元素在一列中顯示；all：元素橫跨所有列顯示。5.1.6定義橫跨所有列2.示例介紹

/*設(shè)置橫跨所有列顯示*/

-webkit-column-span:all; column-span:all;5.2實驗室：模仿雜志的多列版式案例簡介一個簡易的仿雜志效果的頁面。頁面版式分3列布局標題橫跨所有列顯示；文章的開篇內(nèi)容的第一個字設(shè)置較大內(nèi)容是圖文并茂，主要是仿雜志效果。5.3小結(jié)本章主要講解了CSS3多列布