处理多列布局中的溢出
在本指南中，我们将了解如何处理多列 (multicol) 布局中的溢出，包括列框内部的溢出以及内容超出容器容量的情况。
列框内部的溢出
当某个项目的大小大于列框时，就会发生溢出。例如，当列中的图像宽度大于 column-width 值或根据 column-count 声明的列数确定的列宽时，就会发生这种情况。
在这种情况下，内容应该明显溢出到下一列，而不是被列框裁剪。
html
<div class="container">
<p>
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic.
</p>
<img
alt="A close-up of two hot air balloons being inflated."
src="https://mdn.github.io/shared-assets/images/examples/balloons3.jpg" />
<p>
Gumbo beet greens corn soko endive gumbo gourd. 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>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
有两列文本。在左列中，有一张图片比列宽。该图片扩展到第二列，出现在右列文本的后面。右列的文本流不受突出的图片影响，但其外观受到影响。
如果你想让图片适应列框，设置 max-width: 100% 将防止图片超出其容器，在本例中是列框。
css
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
img {
max-width: 100%;
}
列数超出容纳范围
溢出列的处理方式取决于媒体上下文是分段的（例如打印）还是连续的（例如网页）。
在分段媒体中，当一个分段（例如，一页）被列填满后，列将移动到新页面并填充该页面。在连续媒体中，列将沿行内方向溢出。在网页上，这意味着你将获得一个水平滚动条。
下面的示例展示了这种溢出行为。多列容器设置了 height，并且文本量超过了创建列的空间；因此，我们得到了在容器外部创建的列。
html
<div class="container">
<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 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>
css
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 200px;
height: 180px;
border: 2px dashed;
}
使用垂直媒体查询
网页上多列布局的一个问题是，如果列高于视口，读者需要上下滚动页面才能阅读，这不是良好的用户体验。避免这种情况的一种方法是，只有在你确定有足够的垂直空间时才应用列属性。
在下面的示例中，我们使用了 height @media query 来确保在应用列属性之前有足够的垂直空间。
css
body {
font: 1.2em / 1.5 sans-serif;
}
@media (height >= 300px) {
.container {
column-width: 200px;
}
}
后续步骤
在本系列的最终指南中，我们将看到 分段如何与多列布局配合使用，从而使我们能够控制内容在列之间如何断裂。