Spalten stylen
Da Spaltenboxen, die innerhalb von Mehrspalten- (multicol) Containern erstellt werden, anonyme Boxen sind, ist es nicht möglich, einzelne Spalten zu stylen. Wir können lediglich die Abstände zwischen den Spalten und den Container im Allgemeinen stylen. Dieser Leitfaden erklärt, wie man die Lücken ändert und Stilregeln zwischen Spalten anwendet.
Spaltenabstände
Der Abstand zwischen Spalten wird mit der Eigenschaft column-gap oder gap gesteuert. Die column-gap-Eigenschaft ist im Mehrspalten-Layout Modul definiert. Die gap-Eigenschaft ist im Box-Ausrichtungs 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-Flexbox-Layout.
Der Anfangswert von column-gap ist 1em, was verhindert, dass Spalten ineinander laufen. 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 unten stehenden Beispiel ist 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 zulässige 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 Mehrspalten-Containers berechnet.
Spaltenregeln
Die Spezifikation definiert column-rule-width, column-rule-style und column-rule-color, und bietet eine Kurzform column-rule. Diese Eigenschaften funktionieren genau so 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 Mehrspalten-Container ist, und daher haben alle Spalten die gleiche Regel. Regeln werden nur zwischen Spalten gezeichnet und nicht an den äußeren Rändern. Regeln werden auch nur zwischen Spalten gezeichnet, die Inhalt haben.
Im nächsten Beispiel wurde eine 5px-gepunktete Regel mit der Farbe rebeccapurple mithilfe von Langformen 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 einnimmt: Eine breite Regel wird die Spalten nicht auseinanderdrücken, um Platz für die Regel zu schaffen. Stattdessen überlagert die Regel den Abstand.
Das folgende Beispiel verwendet eine sehr breite Regel von 40px und einen 10px-Abstand. Die Regel wird unter dem Spalteninhalt angezeigt. Um auf beiden Seiten der Regel Platz zu schaffen, müsste der Abstand so weit erhöht werden, dass er größer als 40px ist.
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 werden wir uns damit befassen, wie Elemente innerhalb eines Containers sich über alle Spalten erstrecken lassen.