column-fill几个属性值测试实例页面

展示

去论坛 »

column-fill:auto

balance是默认值。auto属性值在Firefox中渲染正确，Chrome中需要固定高度才有效。balance-all没有浏览器支持。

column-fill:balance

balance是默认值。auto属性值在Firefox中渲染正确，Chrome中需要固定高度才有效。balance-all没有浏览器支持。

column-fill:balance-all

balance是默认值。auto属性值在Firefox中渲染正确，Chrome中需要固定高度才有效。balance-all没有浏览器支持。

代码

HTML：

<h4>column-fill:auto</h4>
<div class="container auto">...</div>
<h4>column-fill:balance</h4>
<div class="container balance">...</div>
<h4>column-fill:balance-all</h4>
<div class="container balance-all">...</div>

CSS：

.container {
    width: 300px; height: 80px;
    border: solid deepskyblue;
    padding: 10px;
    column-count: 2;
}
.auto {
    column-fill: auto;
}
.balance {
    column-fill: balance;
}
.balance-all {
    column-fill: balance-all;
}