處理多列布局中的溢位
在本指南中，我們將瞭解如何處理多列 (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;
}
}
後續步驟
在本系列的最終指南中，我們將看到 分段如何與多列布局配合使用，從而使我們能夠控制內容在列之間如何斷裂。