Če želite narediti stolpce ločene, lahko med vsakim stolpcem dodate navpično črto. Črta je v središču reže stolpca. Če ste že kdaj oblikovali border, ste pripravljeni na oblikovanje 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; )Objekt je okrajšava za column-rule-width, column-rule-stylein column-rule-color, kar je enako vzorec kot borderin sprejema enake vrednosti.
-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-widthlahko kot dolžina 3pxali vrednost ključne besede thin.
column-rule-styleje lahko katera koli od border-stylevrednosti, kot solidso dotted,, in dashed.
column-rule-color je lahko poljubna barvna vrednost.
Za razliko column-gap, column-rulene zasedajo prostor. Če column-rule-widthje column-gappravilo debelejše od pravila, se pravilo razširi pod stolpci.
Navpično pravilo bo obstajalo samo med stolpci z vsebino.
Podpora za brskalnik
Podpora za postavitev več stolpcev:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Kaj | 3+ | 1,5+ | 11,1+ | 10+ | 2.3+ | 6.1+ |
Ne pozabite na svoje predpone!