相信你們都看過報紙,報紙上的內容大多數都是分欄顯示的,以下圖所示:css
先來看看與多列布局(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
前端
總體看一下這些屬性對應的位置:web
一、列數和列寬
1.1 列數(column-count
)column-count
:用來指定一個多列元素的列數。瀏覽器
語法:ide
column-count: auto || number複製代碼
auto
是column-count
的默認值,當設置爲auto
時,元素分欄由其餘屬性決定,好比後面要講的column-width
;它還能夠是任何正整數數字,不能帶單位,用來表示多列布局的列數。佈局
須要注意的是,在Firefox和Webkit下仍是須要各自的私有屬性:-moz
和-webkit
,正確的兼容寫法:spa
-moz-column-count: auto || number;
-webkit-column-count: auto || number;
column-count: auto || number;複製代碼
實例:3d
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;
}複製代碼
效果圖:code
1.2 列寬(column-width
)column-width
:用來設置多列布局的列寬。orm
語法:
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.1 列的間距(column-gap
)column-gap
:用來設置列與列之間的距離。
語法:
column-gap: normal || length;複製代碼
默認值爲normal
,W3C建議1e
m值。此值還能夠是任何非負整數值,單位能夠是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-width
column-rule-width
:用來設置column-rule的樣式,默認值爲「none」,相似於border-width屬性。
column-rule-style
column-rule-style
:用來設置column-rule的樣式,默認爲none,此屬性的樣式和border-style的樣式同樣:
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;複製代碼
column-rule-color
column-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
增大並不會影響列的佈局,只是將其往元素兩邊擴展。
三、跨越列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;
}複製代碼
效果圖:
五、填充列column-fill
:用來設置元素全部列的高度是否統一。
語法:
column-fill: auto || balance;複製代碼
默認值爲auto
,表示列高度自適應內容;此值設爲balance
時,全部列的高度以其中最高的一列統一。
兼容寫法:
-moz-column-fill: auto || balance;
-webkit-column-fill: auto || balance;
column-fill: auto || balance;複製代碼
兼容性:兼容性
五、分欄符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瀏覽器,同時須要加上私有屬性。