Spalten stilisieren
Da die in mehrspaltigen (multicol) Containern erstellten Spaltenboxen 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 Sie die Lücken und Stilregeln zwischen den Spalten ändern können.
Spaltenabstände
Der Abstand zwischen den Spalten wird mit der column-gap oder gap Eigenschaft gesteuert. Die Eigenschaft column-gap ist im modul für mehrspaltiges Layout definiert. Die Eigenschaft gap ist im modul für Box-Ausrichtung definiert. Dies ist eine einheitliche Eigenschaft, um Lücken zwischen Boxen in allen Layouts zu definieren, die Lücken unterstützen, einschließlich CSS Grid Layout und CSS Flexiblen Box-Layouts.
Der Anfangswert von column-gap ist 1em, was verhindert, dass Spalten ineinander laufen. In anderen Layoutmethoden 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 die Lücke ändern, indem Sie einen beliebigen <length>-Wert verwenden. Im folgenden Beispiel ist der column-gap auf 40px eingestellt.
<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 eine <length-percentage>, was bedeutet, dass Prozentsätze erlaubt sind. Prozentwerte für column-gap werden als Prozentsatz der Breite des mehrspaltigen 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 wie die border Eigenschaften: Jeder <line-style> kann als column-rule-style verwendet werden, genauso wie es für gültige border-style möglich ist.
Diese Eigenschaften werden auf das Element angewendet, das der mehrspaltige Container ist, und daher haben alle Spalten die gleiche Regel. Regeln werden nur zwischen Spalten gezogen und nicht an den äußeren Rändern. Regeln werden auch nur zwischen Spalten gezogen, die Inhalt haben.
Im nächsten Beispiel wurde eine 5px-punktierte Regel mit der Farbe rebeccapurple unter Verwendung der ausführlichen Werte 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 auseinander schieben, um Platz für die Regel zu schaffen. Stattdessen überlagert die Regel die Lücke.
Das unten stehende Beispiel verwendet eine sehr breite Regel von 40px und eine 10px Lücke. Die Regel wird unter dem Spalteninhalt angezeigt. Um auf beiden Seiten der Regel Platz zu schaffen, müsste die Lücke auf mehr als 40px vergrößert 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 werden wir uns damit beschäftigen, Elemente innerhalb eines Containers über alle Spalten zu erstrecken.