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 dercolumn-gap odergap Eigenschaft gesteuert. Die Eigenschaftcolumn-gap ist immodul für mehrspaltiges Layout definiert. Die Eigenschaftgap ist immodul 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ßlichCSS Grid Layout undCSS Flexiblen Box-Layouts.

Der Anfangswert voncolumn-gap ist1em, was verhindert, dass Spalten ineinander laufen. In anderen Layoutmethoden wirdcolumn-gap als Synonym fürgap unterstützt, jedoch mit einem Anfangswert von0. Der Schlüsselwortwertnormal setztcolumn-gap auf den Anfangswert.

Sie können die Lücke ändern, indem Sie einen beliebigen<length>-Wert verwenden. Im folgenden Beispiel ist dercolumn-gap auf40px eingestellt.

<div>  <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ürcolumn-gap ist eine<length-percentage>, was bedeutet, dass Prozentsätze erlaubt sind. Prozentwerte fürcolumn-gap werden als Prozentsatz der Breite des mehrspaltigen Containers berechnet.

Spaltenregeln

Die Spezifikation definiertcolumn-rule-width,column-rule-style undcolumn-rule-color, und bietet eine Kurzformcolumn-rule. Diese Eigenschaften funktionieren genau wie dieborder Eigenschaften: Jeder<line-style> kann alscolumn-rule-style verwendet werden, genauso wie es für gültigeborder-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 Farberebeccapurple unter Verwendung der ausführlichen Werte erstellt.

<div>  <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-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 von40px und eine10px 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 als40px vergrößert werden.

<div>  <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: 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.