CSS column-fill 属性

指定如何填充列：

.newspaper1 {
column-fill: auto;
}

.newspaper2 {
column-fill: balance;
}

下面有更多 "亲自试一试" 示例。

定义和用法

这个column-fill属性指定如何填充列，平衡或非平衡。

提示：如果为多列元素添加高度，则可以控制内容填充列的方式。内容可以平衡或按顺序填充。

默认值：	平衡
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.columnFill="auto"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

后跟 -moz- 的数字指定使用前缀的第一个版本。

Property
column-fill	50.0	10.0	52.0 13.0 -moz-	10.0 7.0 -webkit-	37.0

column-fill: balance|auto|initial|inherit;

Value	Description	Demo
balance	Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally)	Demo ❯
auto	Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly)	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit