第 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 個屬性集合，具體如下：

由於 column 屬性集尚未納入標準，大多數瀏覽器必須使用廠商首碼才能訪問，好在主流的瀏覽器都可以很好的支持了。下麵是主流瀏覽器的支持和首碼情況。

通過上面的表格，我們可以瞭解到，要想讓最新的瀏覽器全部實現效果，都必須使用首碼。

//完整形式

-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，則一直保持四列。

3.column-count

column-count 屬性，用於設置多少列。

//設置列數

-moz-column-count: 4;

4.column-gap

column-gap 屬性，用於設置列間距

//設置列間距

-moz-column-gap: 100px; 

5.column-rule

column-rule 屬性，設置每列中間的分割線//設置列邊線

-moz-column-rule: 2px dashed gray; 

列邊線不會影響到佈局，它會根據佈局的縮放自我調整是否顯示。如果我們把頁面縮放到只能顯示一列時，它自動消失了。

6.column-span

column-span 屬性，設置跨列大標題。

//跨列標題，由於火狐尚未支持，固使用 webkit

-webkit-column-span: all;