黔江：油菜花开美如画
Mehrspaltenlayout, oft als Multicol-Layout bezeichnet, ist eine Spezifikation zur Anordnung von Inhalten in einer Reihe von Spaltenk?sten, ?hnlich wie Spalten in einer Zeitung. Dieser Leitfaden erkl?rt, wie die Spezifikation funktioniert und bietet Beispiele für h?ufige Anwendungsf?lle.
Wichtige Eigenschaften
Das Multicol-Layout unterscheidet sich von anderen Layoutmethoden in CSS; es fragmentiert den Inhalt, einschlie?lich aller nachgelagerten Elemente, in Spalten. Dies geschieht ?hnlich wie die Fragmentierung von Inhalten in Seiten, wenn wir mit CSS-Seitenmedien arbeiten, indem wir ein Druckstilblatt erstellen.
In diesem und den darauf folgenden Leitf?den werden wir die folgenden, im CSS Mehrspaltenlayout-Modul definierten Eigenschaften besprechen:
Definieren von Spalten
Durch Hinzufügen der Eigenschaft column-count oder column-width zu einem Element oder die Verwendung der Kurzform columns wird das Element zu einem Mehrspalten-Container oder kurz Multicol-Container. Die Spalten sind anonyme K?sten; sie werden in der Spezifikation als Spaltenk?sten beschrieben.
Die Anzahl der Spalten festlegen
Die Eigenschaft column-count bestimmt die Anzahl der Spalten, in denen der Inhalt angezeigt werden soll. Der Browser weist dann jedem Spaltenkasten die richtige Menge an Platz zu, um die gewünschte Anzahl an Spalten zu schaffen.
Im folgenden Beispiel verwenden wir die Eigenschaft column-count, um drei Spalten im .container-Element zu erstellen. Der Inhalt, einschlie?lich der Kinder von .container, wird dann auf die drei Spalten verteilt.
<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-count: 3;
}
Im obigen Beispiel ist der Inhalt innerhalb der Paragraphen <p>-Tags mit der Standardformatierung umschlossen. Daher gibt es einen Rand über jedem Paragraphen. Sie k?nnen sehen, wie dieser Rand die erste Textzeile nach unten schiebt. Das liegt daran, dass ein Multicol-Container einen Blockformatierungskontext (BFC) erstellt, wodurch die R?nder von Kinderlementen nicht mit einem Rand des Containers zusammenfallen.
Breite der Spalten festlegen
Die Eigenschaft column-width wird verwendet, um die optimale Breite für jeden Spaltenkasten festzulegen. Wenn Sie eine Spaltenbreite angeben, ermittelt der Browser, wie viele Spalten dieser Breite in den Multicol-Container passen, und verteilt den zus?tzlichen Platz gleichm??ig zwischen den Spalten. Daher sollte die Spaltenbreite als Mindestbreite angesehen werden, da die Spaltenk?sten aufgrund des zus?tzlichen Platzes wahrscheinlich breiter sind.
Im Falle einer einzelnen Spalte mit weniger verfügbarer Breite als der Wert von column-width, wird der Spaltenkasten auf eine Gr??e verkleinert, die kleiner ist als die deklarierte Spaltenbreite.
Im Beispiel unten ist die Eigenschaft column-width auf 200px gesetzt. Wir erhalten so viele 200-Pixel-Spalten, wie in den Container passen, wobei der zus?tzliche Raum gleichm??ig verteilt wird.
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-width: 200px;
}
Sowohl Anzahl als auch Breite der Spalten festlegen
Wenn Sie beide Eigenschaften auf einem Multicol-Container angeben, wirkt column-count als maximale Anzahl von Spalten. Daher tritt das für column-width beschriebene Verhalten ein, bis die in column-count angegebene Anzahl von Spalten erreicht ist. Ab diesem Punkt werden keine weiteren Spalten gezeichnet und der zus?tzliche Raum wird gleichm??ig zwischen den vorhandenen Spalten verteilt, auch wenn noch Platz für weitere Spalten der angegebenen column-width-Gr??e vorhanden ist.
Wenn Sie beide Eigenschaften zusammen verwenden, kann es sein, dass Sie weniger Spalten erhalten als in column-count angegeben.
Im n?chsten Beispiel verwenden wir column-width von 200px und column-count von 2. Selbst wenn Platz für mehr als zwei Spalten vorhanden ist, erhalten wir zwei. Wenn nicht genug Platz für zwei Spalten mit jeweils mindestens 200 Pixeln vorhanden ist, erhalten wir eine.
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 2;
column-width: 200px;
}
Kurzform für Spalteneigenschaften
Sie k?nnen die Kurzform columns verwenden, um die Werte für column-count und column-width festzulegen. Wenn Sie eine L?ngeneinheit angeben, wird der Wert als column-width verwendet, und wenn Sie eine Ganzzahl angeben, wird der Wert als column-count verwendet. Sie k?nnen beide Eigenschaften festlegen, indem Sie die beiden Werte mit einem Leerzeichen trennen.
Dieses CSS würde dasselbe Ergebnis wie das erste Beispiel liefern, mit column-count auf 3 gesetzt.
.container {
columns: 3;
}
Dieses CSS würde dasselbe Ergebnis wie das zweite Beispiel liefern, mit column-width von 200px.
.container {
columns: 200px;
}
Dieses CSS würde dasselbe Ergebnis wie das dritte Beispiel liefern, mit sowohl column-count als auch column-width festgelegt.
.container {
columns: 2 200px;
}
N?chste Schritte
In diesem Leitfaden haben wir die grundlegende Verwendung von Mehrspaltenlayouts kennengelernt. Im n?chsten Leitfaden werden wir uns ansehen, wie wir die Spalten selbst gestalten k?nnen.