Aby wyróżnić kolumny, możesz dodać pionową linię między każdą kolumną. Linia znajduje się w środku przerwy między kolumnami. Jeśli kiedykolwiek tworzyłeś stylizację border, jesteś gotowy do stylizacji 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; )Właściwość jest skrótem dla column-rule-width, column-rule-stylei column-rule-color, który jest tym samym wzorcem, co borderi akceptuje te same wartości.
-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-widthmoże być podobną długością 3pxlub wartością słowa kluczowego, na przykład thin.
column-rule-stylemogą być dowolne border-stylewartości, takich jak solid, dottedi dashed.
column-rule-color może mieć dowolną wartość koloru.
W przeciwieństwie column-gap, column-rulenie zajmują miejsca. Jeśli column-rule-widthjest grubszy niż column-gapthe, reguła rozwinie się pod kolumnami.
Reguła pionowa będzie istnieć tylko między kolumnami, które zawierają treść.
Wsparcie przeglądarki
Obsługa układu wielokolumnowego:
| Chrom | Safari | Firefox | Opera | TO ZNACZY | Android | iOS |
|---|---|---|---|---|---|---|
| Każdy | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Nie zapomnij o swoich przedrostkach!