Mehrspaltiges Layout
Die Spezifikation für das mehrspaltige Layout bietet Ihnen eine Methode, um Inhalte in Spalten anzuordnen, wie Sie sie möglicherweise in einer Zeitung sehen. Dieser Artikel erklärt, wie Sie dieses Feature verwenden können.
| Voraussetzungen: | HTML-Grundlagen (studieren Sie Strukturierung von Inhalten mit HTML) und eine Vorstellung, wie CSS funktioniert (studieren Sie CSS-Styling-Grundlagen). |
|---|---|
| Ziel: | Lernen, wie man ein mehrspaltiges Layout auf Webseiten erstellt, wie man es in einer Zeitung finden könnte. |
Ein einfaches Beispiel
Lassen Sie uns untersuchen, wie das mehrspaltige Layout verwendet wird – oft als multicol bezeichnet – indem wir Schritt für Schritt ein Beispiel erstellen. Um mitzumachen, erstellen Sie ein neues HTML-Dokument auf Ihrem lokalen System und fügen Sie den folgenden Inhalt ein:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Multicol example</title>
<style>
body {
width: 90%;
max-width: 900px;
margin: 2em auto;
font:
0.9em/1.2 Arial,
Helvetica,
sans-serif;
}
</style>
</head>
<body>
<div class="container">
<h1>Simple multicol example</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas
ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In
vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet
turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare
egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et
a urna. Ut id ornare felis, eget fermentum sapien.
</p>
<p>
Nam vulputate diam nec tempor bibendum. Donec luctus augue eget
malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut,
facilisis sed est. Nam id risus quis ante semper consectetur eget
aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit
vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget
velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus
in interdum. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</p>
</div>
</body>
</html>
Unten sehen Sie verschiedene Live-Beispiele, die zeigen, wie die gerenderte Ausgabe in jedem Stadium aussehen sollte.
Ein Drei-Spalten-Layout
Unsere Ausgangsdatei enthält sehr einfaches HTML: einen Wrapper mit der Klasse container, in dem sich eine Überschrift und einige Absätze befinden.
Das <div> mit der Klasse container wird unser Multicol-Container. Wir aktivieren Multicol, indem wir eine von zwei Eigenschaften verwenden: column-count oder column-width. Die Eigenschaft column-count nimmt eine Zahl als Wert an und erstellt diese Anzahl von Spalten. Wenn Sie das folgende CSS zu Ihrem Stylesheet hinzufügen und die Seite neu laden, erhalten Sie drei Spalten:
.container {
column-count: 3;
}
Die von Ihnen erstellten Spalten haben flexible Breiten – der Browser bestimmt, wie viel Platz jeder Spalte zugewiesen wird.
Festlegen der Spaltenbreite
Ändern Sie Ihr CSS, um column-width wie folgt zu verwenden:
.container {
column-width: 200px;
}
Der Browser erstellt nun so viele Spalten, wie es die von Ihnen angegebene Größe zulässt; der verbleibende Raum wird dann zwischen den vorhandenen Spalten aufgeteilt. Das bedeutet, dass Sie nicht genau die von Ihnen angegebene Breite erhalten, es sei denn, Ihr Container ist genau durch diese Breite teilbar.
Gestaltung der Spalten
Die durch Multicol erstellten Spalten können nicht individuell gestaltet werden. Es gibt keine Möglichkeit, eine Spalte größer als die anderen zu machen oder die Hintergrund- oder Textfarbe einer einzelnen Spalte zu ändern. Sie haben zwei Möglichkeiten, die Darstellung der Spalten zu ändern:
- Ändern der Größe der Lücke zwischen Spalten mit dem
column-gap. - Hinzufügen einer Linie zwischen den Spalten mit
column-rule.
Verwenden Sie Ihr obiges Beispiel und ändern Sie die Größe der Lücke, indem Sie eine column-gap-Eigenschaft hinzufügen. Sie können mit verschiedenen Werten experimentieren – die Eigenschaft akzeptiert jede Längeneinheit.
Fügen Sie nun eine Linie zwischen den Spalten mit column-rule hinzu. Ähnlich wie die border-Eigenschaft, die Sie in früheren Lektionen kennengelernt haben, ist column-rule eine Kurzform für column-rule-color, column-rule-style und column-rule-width und akzeptiert die gleichen Werte wie border.
.container {
column-count: 3;
column-gap: 20px;
column-rule: 4px dotted rgb(79 185 227);
}
Versuchen Sie, Linien unterschiedlicher Stile und Farben hinzuzufügen.
Beachten Sie, dass die Linie keine eigene Breite beansprucht. Sie liegt über der mit column-gap geschaffenen Lücke. Um mehr Platz auf beiden Seiten der Linie zu schaffen, müssen Sie die column-gap-Größe vergrößern.
Spalten überspannen
Sie können ein Element alle Spalten überspannen lassen. In diesem Fall wird der Inhalt an der Stelle unterbrochen, an der das überspannende Element eingeführt wird, und dann unterhalb des Elements fortgesetzt, wobei ein neues Satz Spalten erstellt wird. Um ein Element alle Spalten überspannen zu lassen, geben Sie den Wert all für die Eigenschaft column-span an.
Hinweis:
Es ist nicht möglich, ein Element nur einige Spalten überspannen zu lassen. Die Eigenschaft kann nur die Werte none (was der Standard ist) oder all haben.
Fügen Sie die folgende Regel zu Ihrem CSS hinzu, unter den vorherigen:
h2 {
column-span: all;
background-color: rgb(79 185 227);
color: white;
padding: 0.5em;
}
Fügen Sie nun eine Überschrift der zweiten Ebene zwischen dem ersten und dem zweiten Absatz ein:
<h2>Spanning subhead</h2>
Ihr gerendertes Code sollte jetzt so aussehen:
Spalten und Fragmentierung
Der Inhalt eines mehrspaltigen Layouts ist fragmentiert. Er verhält sich im Wesentlichen auf die gleiche Weise wie Inhalte in Medien mit Seiten, etwa wenn Sie eine Webseite drucken. Wenn Sie Ihren Inhalt in einen Multicol-Container verwandeln, wird er in Spalten fragmentiert. Damit der Inhalt das tun kann, muss er brechen.
Fragmentierte Boxen
Manchmal erfolgt dieses Brechen an Stellen, die zu einem schlechten Leseerlebnis führen. Im folgenden Beispiel habe ich multicol verwendet, um eine Reihe von Boxen zu gestalten, von denen jede eine Überschrift und etwas Text enthält. Die Überschrift wird vom Text getrennt, wenn die Spalten zwischen den beiden fragmentieren.
<div class="container">
<div class="card">
<h2>I am the heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta.
Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
</p>
</div>
</div>
.container {
column-width: 250px;
column-gap: 1em;
}
.card {
background-color: rgb(207 232 220);
border: 2px solid rgb(79 185 227);
padding: 10px;
margin-bottom: 1em;
}
Festlegen von break-inside
Um dieses Verhalten zu steuern, können wir Eigenschaften aus der CSS-Fragmentierung-Spezifikation verwenden. Diese Spezifikation gibt uns Eigenschaften, um das Brechen von Inhalten in Multicol und in Medien mit Seiten zu steuern. Zum Beispiel, indem Sie die Eigenschaft break-inside mit einem Wert von avoid zu den Regeln für .card hinzufügen. Dies ist der Container der Überschrift und des Textes, sodass wir nicht möchten, dass er fragmentiert wird.
.card {
break-inside: avoid;
background-color: rgb(207 232 220);
border: 2px solid rgb(79 185 227);
padding: 10px;
margin-bottom: 1em;
}
Durch das Hinzufügen dieser Eigenschaft bleiben die Boxen intakt – sie fragmentieren jetzt nicht mehr über die Spalten hinweg.
Zusammenfassung
Sie wissen nun, wie Sie die grundlegenden Funktionen des mehrspaltigen Layouts nutzen können, ein weiteres Werkzeug, das Ihnen zur Verfügung steht, wenn Sie eine Layout-Methode für die von Ihnen erstellten Designs auswählen.