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
column-count: auto || number
column-count
的默認值,當設(shè)置為auto
時,元素分欄由其他屬性決定,比如后面要講的column-width
;它還可以是任何正整數(shù)數(shù)字,不能帶單位,用來表示多列布局的列數(shù)。-moz-column-count: auto || number;
-webkit-column-count: auto || number;
column-count: auto || number;
.columns3{
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
.columns4{
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
column-width: auto || length;
auto
,如果設(shè)置為auto
或沒有顯式的設(shè)置此值時,列寬由其他屬性來決定,比如:由column-count
來決定;此值還可以用固定值來設(shè)置列寬,單位可以是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;
}
columns: <column-count> <collumn-width>
column-gap: normal || length;
-moz-column-gap: normal || <length>;
-webkit-column-gap: normal || <length>;
column-gap: normal || <length>;
.gap{
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
column-gap:40px;
}
column-gap
設(shè)置的值只作用于列與列之間。column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;
column-rule
的樣式,默認值為“none”,類似于border-width
屬性。column-rule
的樣式,默認為none,此屬性的樣式和border-style
的樣式一樣:column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
column-rule
的顏色,類似border-color
屬性,如果不想顯示顏色,可設(shè)置為transparent
(透明色)。column-rule-width: length;
column-rule-style: style;
column-rule-color: color;
-moz-column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;
-webkit-column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;
column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;
兼容性:兼容性
實例:
.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并不會占據(jù)空間位置,看下面的例子:
.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:用來設(shè)置元素所有列的高度是否統(tǒng)一。
語法:
column-fill: auto || balance;
默認值為auto
,表示列高度自適應(yīng)內(nèi)容;此值設(shè)為balance
時,所有列的高度以其中最高的一列統(tǒng)一。
兼容寫法:
-moz-column-fill: auto || balance;
-webkit-column-fill: auto || balance;
column-fill: auto || balance;
兼容性:兼容性
5、分欄符
column-break-before
、column-break-after
、column-break-inside
三個屬性都是用來設(shè)置對象何時斷行。
column-break-before:設(shè)置或檢索對象之前是否斷行。
column-break-after:設(shè)置或檢索對象之后是否斷行。
column-break-inside:設(shè)置或檢索對象內(nèi)部是否斷行。
語法:
-webkit-column-break-before
column-break-before
-webkit-column-break-after
column-after
-webkit-column-break-inside
column-break-inside
目前僅支持Webkit瀏覽器,同時需要加上私有屬性。
更多建議: