跨列和平衡列
在本指南中，我们将了解如何使元素在多列（multicol）容器内跨越列，以及如何控制列的填充方式。
跨越列
要使项目跨列，请使用值为 all 的 column-span 属性。这将使元素成为一个跨列元素，跨越所有列。
多列容器的任何后代元素都可以转换为跨列元素，包括直接子元素和间接子元素。例如，直接嵌套在容器内的标题可以成为跨列元素，嵌套在多列容器内的 <section> 内的标题也可以成为跨列元素。
在下面的示例中，<h2> 元素被设置为 column-span: all 并跨越所有列。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd.
</p>
<h2>A heading</h2>
<p>
Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale. Celery potato scallion desert raisin horseradish spinach
carrot soko.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
h2 {
column-span: all;
background-color: #4d4e53;
color: white;
}
在这个第二个示例中，标题位于 <article> 元素内，但仍然按预期跨越内容。
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd.
</p>
<article>
<h2>A heading</h2>
<p>
Parsley shallot courgette tatsoi pea sprouts fava bean collard greens
dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
zucchini.
</p>
<p>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus
winter purslane kale. Celery potato scallion desert raisin horseradish
spinach carrot soko.
</p>
</article>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
h2 {
column-span: all;
background-color: #4d4e53;
color: white;
}
当引入跨列元素时，它会中断列的流动；列在跨列元素之后重新开始，有效地创建了一组新的列框。内容不会跳过跨列元素。
column-span 的限制
column-span 只能有两个值。初始值 none 表示项目不跨越并保留在列内。值 all 表示项目跨越所有列。没有值可以实现部分跨越，例如使项目跨越三列中的两列。
需要注意的事项
如果跨列元素位于具有外边距、内边距、边框或背景颜色的另一个元素内部，则该框可能会出现在跨列元素的上方，其余内容显示在下方。因此，在将元素设置为跨越所有列时应小心，确保考虑这种情况。
body {
font: 1.2em / 1.5 sans-serif;
}
article {
border: 1px solid red;
padding: 10px;
}
.container {
column-width: 250px;
}
h2 {
background-color: #4d4e53;
color: white;
column-span: all;
}
此外，如果跨列元素出现在内容的后面，当跨列元素之后没有足够的内容来创建列时，它可能会导致意外或不必要的行为。请谨慎使用跨列，并在各种断点处进行测试，以确保获得预期的效果。
填充和平衡列
平衡的列集是指所有列都包含大致相同数量的内容。当内容量与提供的空间量不匹配时，例如在容器上声明 height 时，填充和平衡就变得相关。
column-fill 的初始值为 balance。balance 的值表示所有列都尽可能平衡。在分段上下文（例如分页媒体）中，只有最后一个片段是平衡的。这意味着在最后一页上，最后一组列框是平衡的。
另一个平衡值 balance-all 在分段上下文中平衡所有列。
此示例中的列包含图像和一些文本，它们是平衡的。无法中断的图像位于第一列。其他列是平衡的，填充了等量的文本。
<div class="container">
<img
alt="Multiple hot air balloons in a clear sky, a crowd of spectators gather in the foreground."
src="https://mdn.github.io/shared-assets/images/examples/balloons.jpg" />
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<p>
Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette
tatsoi pea sprouts fava bean collard greens dandelion.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
h2 {
background-color: #4d4e53;
color: white;
}
img {
max-width: 100%;
}
.container {
column-width: 200px;
column-fill: balance;
height: 250px;
}
column-fill 的 auto 值按顺序填充列，在将内容放入后续列之前，首先填充行内起始方向的第一列，而不是平衡和平均填充所有列。在此示例中，我们将 column-fill 更改为 auto。列被填充到容器的高度，末尾留有空列。
body {
font: 1.2em / 1.5 sans-serif;
}
h2 {
background-color: #4d4e53;
color: white;
}
img {
max-width: 100%;
}
.container {
column-width: 150px;
column-fill: auto;
height: 250px;
}
后续步骤
在下一个指南中，你将学习 多列布局如何处理列内溢出 以及当列数超出容器容纳范围时如何处理。