CSS 属性column-fill 负责在分成列时平衡元素的内容。
属性值
CSS 属性column-fill 采用以下值之一值，初始值为blance:
auto:顺序填充列。内容仅占用所需的空间。这可能会导致某些列保持空白。
blance:各列之间的内容均等分配。在分段上下文中，例如Paged Media，只有最后一个片段/最后一个页面是平衡的。它是初始值。
适用范围
所有 multicol 元素。
语法
column-fill = auto | balance CSS column-fill: balance 和 auto
在以下示例中，<p> 元素的内容分为三列:
<html>
<head>
<style>
p {
column-count: 3;
column-rule: 5px solid black;
}
.col-fill-auto {
column-fill: auto;
}
.col-fill-balance {
column-fill: balance;
}
#p-auto {
background-color: pink;
}
#p-bal {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>column-fill 属性</h1>
<div>
<h2>column-fill: auto</h2>
<p class="col-fill-auto" id="p-auto">孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
</div>
<div>
<h2>column-fill: balance</h2>
<p class="col-fill-balance" id="p-bal">孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。</p>
</div>
</body>
</html>