基本介紹
- 外文名：column-fill
- 語法：auto | balance
- 默認值：auto
- 說明：設定或檢索對象所有列的高度是否統一
簡介,語法,取值,說明,寫法,示例,
簡介
column-fill
語法
column-fill：auto | balance
默認值：auto
取值
auto：
列高度自適應內容
balance：
所有列的高度以其中最高的一列統一
說明
設定或檢索對象所有列的高度是否統一。
對應的腳本特性為columnFill。
寫法
核心類型寫法
Webkit(Chrome/Safari)
Gecko(Firefox)
Presto(Opera)
Trident(IE)column-fill
W3Ccolumn-fill
示例
body {
font: 14px / 1.5 georgia,
serif,
sans - serif;
}
p {
margin: 0;
padding: 5px 10px;
background: #eee;
}
h1 {
margin: 10px 0;
font - size: 16px;
}.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 - fill: balance This module describes multi - column layout in CSS By using functionality described in this document,
style sheets can declare that the content of an element is to be laid out in multiple columns.
