Spalten stylen
Da Spaltenboxen, die innerhalb von Multi-Column-(multicol)-Containern erstellt werden, anonyme Boxen sind, ist das Stylen einzelner Spalten nicht möglich. Wir können jedoch die Abstände zwischen den Spalten und den Container im Allgemeinen stylen. Dieser Leitfaden erklärt, wie man den Abstand und die Stilregeln zwischen den Spalten ändert.
Spaltenabstände
Der Abstand zwischen Spalten wird mit der Eigenschaft column-gap
oder gap
gesteuert. Die Eigenschaft column-gap
ist im Multi-Column-Layout Modul definiert. Die Eigenschaft gap
ist im Box-Alignment Modul definiert. Dies ist eine einheitliche Eigenschaft zur Definition von Abständen zwischen Boxen in allen Layouts, die Abstände unterstützen, einschließlich CSS Grid Layout und CSS Flexible Box Layout.
Der Anfangswert von column-gap
ist 1em
, was verhindert, dass Spalten ineinanderlaufen. In anderen Layout-Methoden wird column-gap
als Synonym für gap
unterstützt, jedoch mit einem Anfangswert von 0
. Der Schlüsselwortwert normal
setzt column-gap
auf den Anfangswert.
Sie können den Abstand mit jedem <length>
-Wert ändern. Im untenstehenden Beispiel ist der column-gap
auf 40px
gesetzt.
<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;
column-gap: 40px;
}
Der erlaubte Wert für column-gap
ist ein <length-percentage>
, was bedeutet, dass Prozentsätze erlaubt sind. Prozentwerte für column-gap
werden als Prozentsatz der Breite des Multicol-Containers berechnet.
Spaltenregeln
Die Spezifikation definiert column-rule-width
, column-rule-style
und column-rule-color
, wobei ein Kurzbefehl column-rule
bereitgestellt wird. Diese Eigenschaften funktionieren genauso wie die border
-Eigenschaften: Jeder <line-style>
kann als column-rule-style
verwendet werden, genau wie bei einem gültigen border-style
.
Diese Eigenschaften werden auf das Element angewendet, das der Multicol-Container ist. Daher haben alle Spalten die gleiche Regel. Regeln werden nur zwischen den Spalten und nicht an den äußeren Rändern gezogen. Regeln werden auch nur zwischen Spalten gezogen, die Inhalt haben.
Im nächsten Beispiel wurde eine 5px gepunktete Regel mit der Farbe rebeccapurple
unter Verwendung der Langformwerte erstellt.
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-rule-width: 5px;
column-rule-style: dotted;
column-rule-color: rebeccapurple;
}
Beachten Sie, dass die Regel selbst keinen Platz beansprucht: Eine breite Regel wird die Spalten nicht auseinanderdrücken, um Platz für die Regel zu schaffen. Stattdessen überlagert die Regel den Abstand.
Das untenstehende Beispiel verwendet eine sehr breite Regel von 40px
und 10px
Abstand. Die Regel wird unter dem Spalteninhalt angezeigt. Um auf beiden Seiten der Regel Platz zu schaffen, müsste der Abstand auf mehr als 40px
erhöht werden.
body {
font: 1.2em / 1.5 sans-serif;
}
.container {
column-count: 3;
column-gap: 10px;
column-rule: 40px solid rebeccapurple;
}
Nächste Schritte
Dieser Artikel beschreibt alle aktuellen Möglichkeiten, wie Spaltenboxen gestylt werden können. Im nächsten Leitfaden sehen wir uns an, wie man Elemente innerhalb eines Containers über alle Spalten hinweg erstreckt.