试一试
column-fill: auto;
column-fill: balance;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather.
</p>
</section>
#example-element {
width: 100%;
height: 90%;
columns: 3;
text-align: left;
}
语法
css
/* Keyword values */
column-fill: auto;
column-fill: balance;
/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;
column-fill 属性被指定为下面列出的关键字值之一。初始值是 balance，因此内容将会在各列之间平衡。
值
auto-
各列按顺序填充。内容只占用它所需的空间，可能会导致某些列保持为空。
balance-
内容在各列之间平均分配。在分段上下文中，例如分页媒体，只有最后一个分段会被平衡。因此，在分页媒体中，只有最后一页会被平衡。
规范定义了一个 balance-all 值，其中内容在分段上下文中（例如分页媒体）会在各列之间平均分配。此值尚不受任何浏览器支持。
正式定义
正式语法
column-fill =
auto |
balance |
balance-all
示例
平衡列内容
HTML
html
<p class="fill-auto">
This paragraph fills columns one at a time. Since all of the text can fit in
the first column, the others are empty.
</p>
<p class="fill-balance">
This paragraph attempts to balance the amount of content in each column.
</p>
CSS
css
p {
height: 7em;
background: #ffff99;
columns: 3;
column-rule: 1px solid;
}
p.fill-auto {
column-fill: auto;
}
p.fill-balance {
column-fill: balance;
}
结果
规范
| 规范 |
|---|
| CSS Multi-column Layout Module Level 1 # cf |
浏览器兼容性
加载中…
警告：由于规范中未解决的问题，column-fill 在不同浏览器中存在一些互操作性问题和错误。
特别是，当使用 column-fill: auto 按顺序填充列时，Chrome 仅在多列容器在块方向（例如，在水平书写模式下的高度）具有大小时才会考虑此属性。Firefox 始终会考虑此属性，因此在没有大小的情况下会将所有内容填充到第一列中。