Umgang mit Überlauf im Mehrspalten-Layout
In diesem Leitfaden betrachten wir den Umgang mit Überlauf in einem Mehrspalten- (multicol) Layout, 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 als die Spaltenbox ist. Zum Beispiel kann diese Situation auftreten, 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 überfließen, 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;
}
Dieses Beispiel rendert wie folgt:
Es gibt zwei Textspalten. In der linken Spalte befindet sich ein Foto, das breiter als die Spalte ist. Das Bild dehnt sich in die zweite Spalte aus und erscheint hinter dem Text der rechten Spalte. Der Textfluss in der rechten Spalte wird durch das hervorstehende Foto nicht beeinflusst, aber das Erscheinungsbild wird es.
Wenn Sie möchten, dass ein Bild in die Spaltenbox passt, verhindert max-width: 100%, dass das Bild über seinen Container hinaus wächst, in diesem Fall die Spaltenbox.
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 250px;
}
img {
max-width: 100%;
}
Die aktualisierte Darstellung sieht so aus:
Mehr Spalten als passen
Wie überlaufende Spalten gehandhabt werden, hängt davon ab, ob der Medienkontext fragmentiert ist, wie im Druck, oder kontinuierlich, wie auf einer Webseite.
- In fragmentierten Medien, nachdem ein Fragment (zum Beispiel eine Seite) mit Spalten gefüllt ist, werden die Spalten auf eine neue Seite verschoben und dort mit Spalten gefüllt.
- In kontinuierlichen Medien, wenn eine Höhe für einen Mehrspalten-Container festgelegt ist, fließen Spalten standardmäßig in Inline-Richtung über. Im Web bedeutet das, dass Sie einen horizontalen Scrollbalken erhalten. Dieses Verhalten kann durch die Verwendung von
column-heightundcolumn-wrapüberschrieben werden, um Spaltenumbruch zu erzwingen.
Dieses Beispiel zeigt das Standard-Überlaufverhalten in kontinuierlichen Medien. 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.
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 200px;
height: 180px;
border: 2px dashed;
}
Dieses Beispiel rendert wie folgt:
Scrollen Sie horizontal, um die überlaufenden Spalten zu sehen.
Verwendung von vertikalen Medienabfragen
Ein Problem mit Multicol im Web ist, dass, wenn die Spalten höher als der Viewport sind, 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 genügend vertikaler Raum vorhanden ist.
Im untenstehenden Beispiel haben wir eine height @media query verwendet, um sicherzustellen, dass ausreichend vertikaler Raum vorhanden ist, bevor die Spalteneigenschaften angewendet werden.
body {
font: 1.2em / 1.5 sans-serif;
}
@media (height >= 300px) {
.container {
column-width: 200px;
}
}
Dieses Beispiel rendert wie folgt:
Verwendung von Spaltenumbruch für Multicol
Die Eigenschaften column-height und column-wrap können verwendet werden, um eine feste Höhe für generierte Spalten festzulegen und überschüssige Spalten dazu zu zwingen, in zusätzlichen Zeilen in Blockrichtung überzulaufen. In horizontalem Schreibmodus-Inhalt resultiert dies in vertikal scrollbaren Zeilen von Spalten, anstatt einer horizontal scrollbaren Einzelzeile. Schauen wir uns ein Beispiel an.
Das HTML enthält grundlegende Textinhalte, die wir der Kürze halber ausgeblendet haben.
Wir geben unserem Inhalt einige Stile. Besonders erwähnenswert ist, dass wir das column-count-Attribut des <body>-Elements auf 3 setzen und seine column-height auf 95vh, so dass jede Zeile von Spalten den Viewport füllt. Wir müssen column-wrap nicht explizit auf wrap setzen: Wenn column-height auf einen <length>-Wert gesetzt ist, löst sich der Anfangswert von column-wrap (auto) zu wrap auf, was normalerweise das Verhalten ist, das Sie möchten.
body {
font-size: 1.3em;
line-height: 1.5;
column-count: 3;
column-height: 95vh;
}
Dieses Beispiel rendert folgendermaßen:
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 gebrochen werden.