相信大家都看過報紙，報紙上的內容大多數都是分欄顯示的，如下圖所示：
對於前端攻城獅來說，這種分列布局，在以前雖然可以實現，可是難度卻是不小，工作量很大，必須使用JavaScript對內容分段，再配合上絕對定位或浮動等CSS樣式來實現多列布局。但現在，強大的CSS3為我們提供了“multi-column”，讓我們可以很輕鬆的實現這樣的分列布局。
先來看看與多列布局（multi-column）相關的css屬性有哪些：
列數和列寬：column-count、column-width、columns
列的間距和分列樣式：column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule
跨越列：column-span
填充列：column-fill
分欄符：column-break-before、column-break-after、column-break-inside
整體看一下這些屬性對應的位置：
1、列數和列寬
1.1 列數（column-count）column-count：用來指定一個多列元素的列數。
語法：
column-count: auto || number複製程式碼auto是column-count的預設值，當設定為auto時，元素分欄由其他屬性決定，比如後面要講的column-width；它還可以是任何正整數數字，不能帶單位，用來表示多列布局的列數。
需要注意的是，在Firefox和Webkit下還是需要各自的私有屬性：-moz和-webkit，正確的相容寫法：
-moz-column-count: auto || number;
-webkit-column-count: auto || number;
column-count: auto || number;複製程式碼例項：
css.columns3{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.columns4{
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}複製程式碼效果圖：
1.2 列寬（column-width）column-width：用來設定多列布局的列寬。
語法：
column-width: auto || length;複製程式碼預設值為auto，如果設定為auto或沒有顯式的設定此值時，列寬由其他屬性來決定，比如：由column-count來決定；此值還可以用固定值來設定列寬，單位可以是px或em，但不能是負值。
例項：
/*左圖*/
.columnsWidth1{
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;
}
/*右圖*/
.columnsWidth2{
-moz-column-width: 75px;
-webkit-column-width: 75px;
column-width: 75px;
}複製程式碼效果圖：
1.3 columnscolumns是複合屬性：
columns: 複製程式碼相容性：相容性
2、列的間距和分列樣式
2.1 列的間距（column-gap）column-gap：用來設定列與列之間的距離。
語法：
column-gap: normal || length;複製程式碼預設值為normal，W3C建議1em值。此值還可以是任何非負整數值，單位可以是px、em、vw等。
相容寫法：
-moz-column-gap: normal || ;
-webkit-column-gap: normal || ;
column-gap: normal || ; 複製程式碼相容性：相容性
例項：
.gap{
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap:40px;
}複製程式碼效果圖：
注意：column-gap設定的值只作用於列與列之間。
2.2 分列樣式（column-rule）column-rule：用來設定列與列之間的邊框寬度、樣式和顏色。
語法：
column-rule: || || ; 複製程式碼引數說明：column-rule-widthcolumn-rule-width：用來設定column-rule的樣式，預設值為“none”，類似於border-width屬性。
column-rule-stylecolumn-rule-style：用來設定column-rule的樣式，預設為none，此屬性的樣式和border-style的樣式一樣：
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;複製程式碼column-rule-colorcolumn-rule-color：用來設定column-rule的顏色，類似border-color屬性，如果不想顯示顏色，可設定為transparent（透明色）。
column-rule還可以拆分開來：
column-rule-width: length;
column-rule-style: style;
column-rule-color: color;複製程式碼相容寫法：
-moz-column-rule: || || ;
-webkit-column-rule: || || ;
column-rule: || || ; 複製程式碼相容性：相容性
例項：
.rule1{
-moz-column-rule-width: 5px;
-webkit-column-rule-width: 5px;
column-rule-width: 5px;
-moz-column-rule-style:dotted;
-webkit-column-rule-style:dotted;
column-rule-style:dotted;
-moz-column-rule-color:blue;
-webkit-column-rule-color:blue;
column-rule-color:blue;
}
.rule2{
-moz-column-rule: 5px double red;
-webkit-column-rule: 5px double red;
column-rule: 5px double red;
}複製程式碼效果圖：
注意：column-rule並不會佔據空間位置，看下面的例子：
.rule3{
-moz-column-rule: 50px solid red;
-webkit-column-rule: 50px solid red;
column-rule: 50px solid red;
}複製程式碼效果圖：
從上面的例子可以看出，column-rule-width增大並不會影響列的佈局，只是將其往元素兩邊擴充套件。
3、跨越列column-span：指定某個元素跨越多少列。
語法：
column-span: none || all;複製程式碼預設值為none，表示不跨越任何列；all表示元素跨越所有列。
相容寫法：
-webkit-column-span: none || all;
column-span: none || all;複製程式碼相容性：相容性
例項：
.columns{
border:1px solid #000;
padding:10px;
width:350px;
columns:auto 3;
}
h2{
-webkit-column-span:all;
column-span:all;
}複製程式碼效果圖：
標題h2按列的佈局跨越了三列布局，也就是當前的所有列。
5、填充列column-fill：用來設定元素所有列的高度是否統一。
語法：
column-fill: auto || balance;複製程式碼預設值為auto，表示列高度自適應內容；此值設為balance時，所有列的高度以其中最高的一列統一。
相容寫法：
-moz-column-fill: auto || balance;
-webkit-column-fill: auto || balance;
column-fill: auto || balance;複製程式碼相容性：相容性
5、分欄符column-break-before、column-break-after、column-break-inside 三個屬性都是用來設定物件何時斷行。
column-break-before：設定或檢索物件之前是否斷行。column-break-after：設定或檢索物件之後是否斷行。column-break-inside：設定或檢索物件內部是否斷行。
語法：
-webkit-column-break-before
column-break-before
-webkit-column-break-after
column-after
-webkit-column-break-inside
column-break-inside複製程式碼目前僅支援Webkit瀏覽器，同時需要加上私有屬性。