# 第 28 章 CSS3 多列布局 學習要點： 1.早期多列問題 2.屬性及版本 3.屬性解釋 主講教師：李炎恢 本章主要探討 HTML5?中 CSS3?提供的多列布局，通過多列布局我們方便的創建流體的多列布局。 **一．早期多列問題** 我們有時想布局成報紙、雜志那樣的多列方式（至少兩列，一般三列以上），但早期 CSS 提供的布局方式都有著極大的限制。如果是固體布局，那么使用浮動或定位布局都可以完成。但對于流體的多列，比如三列以上，那只能使用浮動布局進行，而它又有極大的限制。因為它是區塊性的，對于動態的內容無法伸縮自適應，基本無能力。 //五段內容，分為三列 ``` <div> <p> 我是第一段內容....省略的部分復制大量文本 </p> <p> 我是第二段內容....省略的部分復制大量文本 </p> <p> 我是第三段內容....省略的部分復制大量文本 </p> <p> 我是第四段內容....省略的部分復制大量文本 </p> <p> 我是第五段內容....省略的部分復制大量文本 </p> </div> ``` //帶標題的五段內容，分為三列 ``` <div> <h4>第一段標題</h4> <p> 我是第一段內容....省略的部分復制大量文本 </p> <h4>第二段標題</h4> <p> 我是第二段內容....省略的部分復制大量文本 </p> <h4>第三段標題</h4> <p> 我是第三段內容....省略的部分復制大量文本 </p> <h4>第四段標題</h4> <p> 我是第四段內容....省略的部分復制大量文本 </p> <h4>第五段標題</h4> <p> 我是第五段內容....省略的部分復制大量文本 </p> </div> ``` 上門兩組內容，如果想用浮動和定位實現流體三列，基本不可能。并且實際應用中，需求可能多變，要更改成四列或者五列呢？所以，CSS3?提供了多列布局屬性 columns?來實現這個動態變換的功能。 **二．屬性及版本** CSS3 提供了?columns 多列布局屬性等?7 個屬性集合，具體如下： | **屬性** | **說明** | | --- | --- | | columns | 集成 column-width?和 column-count?兩個屬性 | | column-width | 定義每列列寬度 | | column-count | 定義分分列列數 | | column-gap | 定義列間距 | | column-rule | 定義列邊框 | | column-span | 定義多列布局中子元素跨列效果，firefox?不支持 | | column-fill | 控制每列的列高效果，主流瀏覽器不支持 | 由于 column?屬性集尚未納入標準，大多數瀏覽器必須使用廠商前綴才能訪問，好在主流的瀏覽器都可以很好的支持了。下面是主流瀏覽器的支持和前綴情況。 | | Opera | Firefox | Chrome | Safari | IE | | --- | --- | | 支持需帶前綴 | 11.5 ~ 29 | 2 ~ 40 | 4 ~ 45 | 3.1 ~ 8 | 無 | | 支持不帶前綴 | 無 | 無 | 無 | 無 | 10.0+ | 通過上面的表格，我們可以了解到，要想讓最新的瀏覽器全部實現效果，都必須使用前綴。 //完整形式 ``` -webkit-columns: 150px 4; -moz-columns: 150px 4; columns: border-box; ``` **三．屬性解釋** 為了方便演示，我們在 Firefox?火狐瀏覽器測試，只用-moz-前綴演示。 **1.columns** columns 是一個復合屬性，包含?columns-width 和?columns-count 這兩種簡寫。意為同時設置分列列數和分列寬度。//分成四列，每列寬度自適應 ``` -moz-columns: auto 4; ``` **2.column-width** column-width 屬性，用于設置每列的寬度。 //設置列寬 ``` -moz-column-width: 200px; ``` 這里設置了 200px，有點最小寬度的意思。當瀏覽器縮放到小于 200?大小時，將變成 1?列顯示。而如果是 auto，則一直保持四列。 | **屬性** | **說明** | | --- | --- | | auto | 默認值，自適應。 | | 長度值 | 設置列寬。 | **3.column-count** column-count 屬性，用于設置多少列。 //設置列數 ``` -moz-column-count: 4; ``` | **屬性值** | **說明** | | --- | --- | | auto | 默認值，表示就 1?列。 | | 數值 | 設置列數。 | **4.column-gap** column-gap 屬性，用于設置列間距 //設置列間距 ``` -moz-column-gap: 100px;? ``` | **屬性值** | **說明** | | --- | --- | | auto | 默認值，表示就 1?列。 | | 數值 | 設置列數。 | **5.column-rule** column-rule 屬性，設置每列中間的分割線//設置列邊線 ``` -moz-column-rule: 2px dashed gray;? ``` | **屬性** | **說明** | | --- | --- | | column-rule | &lt;寬度&gt; &lt;樣式&gt; &lt;顏色&gt;的邊框簡寫形式。 | | column-rule-width | 單獨設置邊框寬度。 | | column-rule-style | 單獨設置邊框的樣式。 | | column-rule-color | 單獨設置邊框的顏色。 | 列邊線不會影響到布局，它會根據布局的縮放自我調整是否顯示。如果我們把頁面縮放到只能顯示一列時，它自動消失了。 **6.column-span** column-span 屬性，設置跨列大標題。 //跨列標題，由于火狐尚未支持，固使用?webkit ``` -webkit-column-span: all;? ``` | **屬性** | **說明** | | --- | --- | | none? | 默認值，表示不跨列。 | | all | 表示跨列。 |