Umgang mit Überlauf im Multi-Column-Layout
In diesem Leitfaden betrachten wir, wie man mit Überlauf in einem Multi-Column (multicol) Layout umgeht, sowohl innerhalb der Spaltenboxen als auch in Situationen, in denen mehr Inhalt vorhanden ist, als in den Container passt.
Überlauf innerhalb von Spaltenboxen
Eine Überlaufsituation tritt auf, wenn die Größe eines Elements größer ist als die Spaltenbox. Zum Beispiel könnte die Situation entstehen, wenn ein Bild in einer Spalte breiter ist als der column-width-Wert oder die Breite der Spalte, basierend auf der Anzahl der mit column-count deklarierten Spalten.
In dieser Situation sollte der Inhalt sichtbar in die nächste Spalte überlaufen, anstatt von der Spaltenbox abgeschnitten zu werden.
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
Es gibt zwei Textspalten. In der linken Spalte befindet sich ein Foto, das breiter ist als die Spalte. Das Bild erstreckt sich in die zweite Spalte und erscheint hinter dem Text der rechten Spalte. Der Textfluss in der rechten Spalte wird durch das hervorstehende Foto nicht beeinflusst, aber das Erscheinungsbild schon.
Wenn Sie möchten, dass ein Bild in die Spaltenbox passt, wird die Einstellung max-width: 100% verhindern, dass das Bild über seinen Container hinauswächst, in diesem Fall die Spaltenbox.
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
img {
max-width: 100%;
}
Mehr Spalten als hineinpassen
Wie überlaufende Spalten gehandhabt werden, hängt davon ab, ob der Medienkontext fragmentiert ist, wie beim Druck, oder kontinuierlich, wie bei einer Webseite.
In fragmentierten Medien, nachdem ein Fragment (zum Beispiel eine Seite) mit Spalten gefüllt wurde, werden die Spalten auf eine neue Seite verschoben und dort ebenfalls mit Spalten gefüllt. In kontinuierlichen Medien läuft der Überlauf in Spalten in der Inline-Richtung. Im Web bedeutet das, dass Sie einen horizontalen Scrollbalken erhalten.
Das folgende Beispiel zeigt dieses Überlaufverhalten. Der Multicol-Container hat eine festgelegte height und es gibt mehr Text als Platz für die Erstellung von Spalten; daher werden Spalten außerhalb des Containers erstellt.
<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>
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 200px;
height: 180px;
border: 2px dashed;
}
Verwendung von vertikalen Media Queries
Ein Problem mit multicol im Web ist, dass, wenn die Spalten höher sind als der Viewport, der Leser die Seite nach oben und unten scrollen muss, um zu lesen, was keine gute Benutzererfahrung ist. Eine Möglichkeit, dies zu vermeiden, besteht darin, die Spalteneigenschaften nur anzuwenden, wenn Sie wissen, dass ausreichend vertikaler Platz vorhanden ist.
Im Beispiel unten haben wir eine min-height @media query verwendet, um sicherzustellen, dass genügend vertikaler Raum vorhanden ist, bevor die Spalteneigenschaften angewendet werden.
body {
font: 1.2em / 1.5 sans-serif;
}
@media (min-height: 300px) {
.container {
column-width: 200px;
}
}
Nächste Schritte
Im letzten Leitfaden dieser Serie werden wir sehen, wie Fragmentierung mit Multicol-Layouts funktioniert, um uns Kontrolle darüber zu geben, wie Inhalte zwischen Spalten unterbrochen werden.