风尘是什么意思
Die im CSS multi-column layout module definierten Eigenschaften erweitern den Block-Layout-Modus, was die einfache Definition mehrerer Textspalten erm?glicht. Menschen haben Probleme beim Lesen von Text, wenn Zeilen zu lang sind. Wenn es zu lange dauert, von einem Zeilenende zum Anfang der n?chsten zu gelangen, k?nnen Leser die übersicht verlieren, auf welcher Zeile sie sich befanden. Um das Benutzererlebnis beim Lesen von Text auf einem gro?en Bildschirm zu verbessern, sollten Sie die Breite des Textes begrenzen, indem Sie Textspalten nebeneinander platzieren, genau wie es Zeitungen tun.
Verwenden von Spalten
Spaltenanzahl und -breite
Zwei CSS-Eigenschaften steuern, ob und wie viele Spalten erscheinen: column-count und column-width.
Die Eigenschaft column-count legt die Anzahl der Spalten auf eine bestimmte Zahl fest. Zum Beispiel:
Beispiel 1
HTML
<div id="col">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur.
</p>
<p>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
CSS
#col {
column-count: 2;
}
Ergebnis
Der Inhalt wird in zwei Spalten angezeigt:
Die Eigenschaft column-width legt die gewünschte minimale Spaltenbreite fest. Wenn column-count nicht ebenfalls festgelegt ist, erzeugt der Browser automatisch so viele Spalten, wie in die verfügbare Breite passen.
Beispiel 2
HTML
<div id="wid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#wid {
column-width: 100px;
}
Ergebnis
In einem mehrspaltigen Block flie?t der Inhalt automatisch bei Bedarf von einer Spalte zur n?chsten. Alle HTML-, CSS- und DOM-Funktionalit?ten werden innerhalb von Spalten unterstützt, ebenso wie das Bearbeiten und Drucken.
Die columns-Kurzform
Sie k?nnen entweder column-count oder column-width verwenden. Da sich die Werte für diese Eigenschaften nicht überschneiden, ist es oft bequem, die Kurzform columns zu verwenden.
Beispiel 3
In diesem Beispiel wird die CSS-Deklaration column-width: 12em durch columns: 12em ersetzt.
HTML
<div id="col_short">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#col_short {
columns: 12em;
}
Beispiel 4
In diesem Beispiel wird die CSS-Deklaration column-count: 4 durch columns: 4 ersetzt.
HTML
<div id="columns_4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#columns_4 {
columns: 4;
}
Ergebnis
Beispiel 5
Die beiden CSS-Deklarationen column-width: 8em und column-count: 12 k?nnen durch columns: 12 8em ersetzt werden. Der column-count-Teil der Kurzform ist die maximale Anzahl der Spalten, die vorhanden sein werden. Die column-width ist die Mindestbreite, die jede Spalte haben sollte.
HTML
<div id="columns_12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#columns_12 {
columns: 12 8em;
}
Ergebnis
Unter der Annahme eines Standardabstands von 1em zwischen den Spalten: Wenn der Container breiter als 103em ist (12 Spalten * 8em Breite jede + 7 1em Abst?nde), wird es 12 Spalten geben, jede mit einer Breite von 8em oder mehr. Wenn der Container weniger als 103em breit ist, wird es weniger als 12 Spalten geben. Wenn der Container weniger als 17em breit ist (8em Spalte + 8em Spalte + 1em Abstand), wird der Inhalt als eine einzelne Spalte ohne Spaltenabstand angezeigt.
H?henausgleich
CSS-Spalten erfordern, dass die Spaltenh?hen ausgeglichen werden: Das hei?t, der Browser legt automatisch die maximale Spaltenh?he so fest, dass die H?hen des Inhalts in jeder Spalte ungef?hr gleich sind. Firefox tut dies.
In einigen Situationen ist es jedoch auch nützlich, die maximale H?he der Spalten explizit festzulegen und dann den Inhalt von der ersten Spalte ausgehend zu layouten, wobei so viele Spalten wie n?tig erstellt werden, m?glicherweise überlaufend nach rechts. Wenn also die H?he eingeschr?nkt ist, indem die CSS-Eigenschaften height oder max-height auf einem mehrspaltigen Block gesetzt werden, darf jede Spalte bis zu dieser H?he wachsen und nicht weiter, bevor eine neue Spalte hinzugefügt wird. Dieser Modus ist auch viel effizienter für Layout.
Spaltenabst?nde
Es gibt einen Abstand zwischen den Spalten. Die empfohlene Standardeinstellung ist 1em. Diese Gr??e kann ge?ndert werden, indem die Eigenschaft column-gap auf den mehrspaltigen Block angewendet wird:
Beispiel 6
HTML
<div id="column_gap">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
CSS
#column_gap {
column-count: 5;
column-gap: 2em;
}
Ergebnis
Fazit
CSS-Spalten sind ein Layout-Primitiv, das dazu beitragen kann, gro?e Textbl?cke leichter lesbar zu machen, wenn responsiver Inhalt auf breiten Ansichtsfenstern betrachtet wird. Kreative Entwickler k?nnen viele Verwendungen dafür finden, insbesondere in Kombination mit Container-Abfragen und mit der automatischen H?henausgleichsfunktion.