CSS3多列column佈局

Properties屬性	CSS Version版本	Inherit From Parent繼承性	Description簡介
column	css3	無	設置或檢索對象的列數和每列的寬度。複合屬性
column-width	css3	無	設置或檢索對象每列的寬度
column-count	css3	無	設置或檢索對象的列數
column-gap	css3	無	設置或檢索對象的列與列之間的間隙
column-rule	css3	無	設置或檢索對象的列與列之間的邊框。複合屬性
column-rule-width	css3	無	設置或檢索對象的列與列之間的邊框厚度。
column-rule-style	css3	無	設置或檢索對象的列與列之間的邊框樣式。
column-rule-color	css3	無	設置或檢索對象的列與列之間的邊框顏色。
column-span	css3	無	設置或檢索對象元素是否橫跨全部列。

column-fill	css3	無	設置或檢索對象全部列的高度是否統一。
column-break-before	css3	無	設置或檢索對象以前是否斷行。
column-break-after	css3	無	設置或檢索對象以前是否斷行。
column-break-inside	css3	無	設置或檢索對象內部是否斷行。

columns

設置或檢索對象的列數和每列的寬度。複合屬性

    columns：[ column-width ] || [ column-count ]

.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}

.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}

column-width

 設置或檢索對象每列的寬度

.test{
width:628px;
border:10px solid #000;
-moz-column-width:200px;
-moz-column-count:3;
-webkit-column-width:200px;
-webkit-column-count:3;
column-width:200px;
column-count:3;
}

.test2{
border:10px solid #000;
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;
}

.test3{
border:10px solid #000;
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;
}

column-count

設置或檢索對象的列數

    column-count：<integer> | auto

    <integer>：用整數值來定義列數。不容許負值

    auto：根據column-width自定分配寬度

column-gap

設置或檢索對象的列與列之間的間隙

column-gap：<length> | normal

    <length>：用長度值來定義列與列之間的間隙。不容許負值

    normal：與font-size大小相同。假設該對象的font-size爲16px，則normal值爲16px，類推。

column-rule

設置或檢索對象的列與列之間的邊框。複合屬性。

column-rule：[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]

    [ column-rule-width ]：設置或檢索對象的列與列之間的邊框厚度。

    [ column-rule-style ]：設置或檢索對象的列與列之間的邊框樣式。

    [ column-rule-color ]：設置或檢索對象的列與列之間的邊框顏色。

.test{
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:10px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:10px solid #090;
column-count:3;
column-gap:20px;
column-rule:10px solid #090;
}

設置或檢索對象的列與列之間的邊框厚度。

column-rule-width：<length> | thin | medium | thick

    <length>：用長度值來定義邊框的厚度。不容許負值

    medium：定義默認厚度的邊框。

    thin：定義比默認厚度細的邊框。

    thick：定義比默認厚度粗的邊框。

設置或檢索對象的列與列之間的邊框樣式。

column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

    none：無輪廓。column-rule-color與column-rule-width將被忽略

    hidden：隱藏邊框。

    dotted：點狀輪廓。

    dashed：虛線輪廓。

    solid：實線輪廓

    double：雙線輪廓。兩條單線與其間隔的和等於指定的column-rule-width值

    groove：3D凹槽輪廓。

    ridge：3D凸槽輪廓。

    inset：3D凹邊輪廓。

    outset：3D凸邊輪廓。

column-rule-color：<color>

設置或檢索對象元素是否橫跨全部列。

column-span：none | all

none：不跨列

all：橫跨全部列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:3;
column-gap:20px;
column-rule:3px solid #090;
}

.test p{
-moz-column-span:all;
-webkit-column-span:all;
column-span:all;
}

效果：

設置或檢索對象全部列的高度是否統一。

column-fill：auto | balance

    auto：列高度自適應內容

    balance：全部列的高度以其中最高的一列統一

.test{
width:600px;
border:10px solid #000;
-moz-column-count:2;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-moz-column-fill:balance;
-webkit-column-count:2;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
-webkit-column-fill:balance;
column-count:2;
column-gap:20px;
column-rule:3px solid #090;
column-fill:balance;
}

效果圖：

設置或檢索對象以前是否斷行。

column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

    auto：既不強迫也不由止在元素以前斷行併產生新列

    always：老是在元素以前斷行併產生新列

    avoid：避免在元素以前斷行併產生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}

.test div{
-moz-column-break-before:always;
-webkit-column-break-before:always;
column-break-before:always;
}

效果圖：

設置或檢索對象以後是否斷行。

column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column

    auto：既不強迫也不由止在元素以後斷行併產生新列

    always：老是在元素以後斷行併產生新列

    avoid：避免在元素以後斷行併產生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}
.test div{
-moz-column-break-after:always;
-webkit-column-break-after:always;
column-break-after:always;
}

效果圖：

設置或檢索對象內部是否斷行。

column-break-inside：auto | avoid | avoid-page | avoid-column

    auto：既不強迫也不由止在元素內部斷行併產生新列

    avoid：避免在元素內部斷行併產生新列