Spaltenregel - CSS-Tricks

Inhaltsverzeichnis

Um Spalten zu unterscheiden, können Sie zwischen jeder Spalte eine vertikale Linie einfügen. Die Linie befindet sich in der Mitte der Spaltenlücke. Wenn Sie jemals gestylt haben border, sind Sie bereit zu stylen column-rule.

.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )

Das Anwesen ist eine Abkürzung für column-rule-width, column-rule-styleund column-rule-color, das ist das gleiche Muster wie borderund akzeptiert die gleichen Werte.

-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;

column-rule-widthkann eine Länge wie 3pxoder ein Schlüsselwortwert wie sein thin.

column-rule-stylekann jeder der sein border-stylewie Werte solid, dottedund dashed.

column-rule-color kann ein beliebiger Farbwert sein.

Im Gegensatz zu column-gap, column-rulenehmen Sie nicht Platz. Wenn das column-rule-widthdicker als das column-gapist, wird die Regel unter den Spalten erweitert.

Die vertikale Regel existiert nur zwischen Spalten mit Inhalt.