屬性及版本css3提供了columns多列布局屬性等7個屬性集合，具體如下：
columns整合column-width和column-count兩個屬性
column-width定義每列列寬度
column-count定義分分列列數
column-gap定義列間距
column-rule定義列邊框
column-span定義多列布局中子元素跨列效果，firefox不支援
column-fill控制每列的列高效果，主流瀏覽器不支援
由於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，則一直保持四列。
最小寬度是1列，而不是4列
auto預設值，自適應。
長度值設定列寬。
3.column-count
column-count屬性，用於設定多少列。
//設定列數
-moz-column-count:4;
auto預設值，表示就1列。
數值設定列數。
4.column-gapcolumn-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表示跨列。
div
h1
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...