學習要點：
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
《寬度》 《樣式》 《顏色》的邊框簡寫形式。
column-rule-width
單獨設定邊框寬度。
column-rule-style
單獨設定邊框的樣式。
column-rule-color
單獨設定邊框的顏色。
列邊線不會影響到布局，它會根據布局的縮放自我調整是否顯示。如果我們把頁面縮放到只能顯示一列時，它自動消失了。
6.column-span
column-span 屬性，設定跨列大標題。
//跨列標題，由於火狐尚未支援，固使用 webkit
-webkit-column-span: all;
屬性
說明
none
預設值，表示不跨列。
all表示跨列。
CSS3多列布局
最近買了基本書，因為在實習的時候用到很多css動畫，給任務的時候，也會讓布局一些設計頁面。在做的過程中，覺著自己的css功底還是不行，所以就想再多積累多學習。今天主要看的是大漠的 css3 看知乎上和很多人的技術部落格裡都推薦過。今天先說css3的多列布局。平時用到的比較多的是兩欄布局，三欄布局。方...
CSS3多列布局
css3多列布局可以自動將內容按指定的列數排列，它實現了和報紙 雜誌排版非常相似的布局效果。一 css3多列布局核心屬性 1 columns 整合column width和column count兩個屬性。2 column width 定義每列列寬度 3 column count 定義分列列數 4 ...
CSS3多列布局
在本章中，您將學習如下多列屬性 屬性 瀏覽器支援 column count column gap column rule internet explorer 10 和 opera 支援多列屬性。firefox 需要字首 moz chrome 和 safari 需要字首 webkit 注釋 inter...