DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Um Spalten voneinander abzugrenzen, können Sie eine vertikale Linie zwischen jeder Spalte hinzufügen. Die Linie befindet sich in der Mitte des Spaltenabstands. Wenn Sie jemals `border` gestylt haben, dann sind Sie bereit, `column-rule` zu stylen.
.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;
}Die Eigenschaft ist eine Kurzschreibweise für `column-rule-width`, `column-rule-style` und `column-rule-color`, was dem Muster von `border` entspricht und dieselben Werte akzeptiert.
-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-width` kann eine Länge wie `3px` oder ein Schlüsselwortwert wie `thin` sein.
`column-rule-style` kann einer der `border-style`-Werte sein, wie `solid`, `dotted` und `dashed`.
`column-rule-color` kann jeder Farbwert sein.
Im Gegensatz zu `column-gap` nimmt `column-rule` keinen Platz ein. Wenn `column-rule-width` dicker ist als `column-gap`, wird die Regel unter den Spalten erweitert.
Die vertikale Linie existiert nur *zwischen* Spalten, die Inhalt haben.
Verwandte Eigenschaften
Additional Resources
Browser-Unterstützung
Mehrspalten-Layout-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Alle | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Vergessen Sie nicht Ihre Präfixe!