Da bi stupci bili različiti, možete dodati okomitu crtu između svakog stupca. Linija se nalazi u središtu razmaka kolone. Ako ste ikad oblikovali border, spremni ste za 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 skraćenica za column-rule-width, column-rule-stylei column-rule-color, što je isti uzorak kao borderi prihvaća iste vrijednosti.
-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 biti duljina poput 3pxili vrijednost ključne riječi poput thin.
column-rule-stylemože biti bilo koji od border-stylevrijednosti kao što su solid, dottedi dashed.
column-rule-color može biti bilo koja vrijednost boje.
Za razliku od toga column-gap, column-rulene zauzima prostor. Ako column-rule-widthje debljina od column-gaptada, pravilo će se proširiti ispod stupaca.
Okomito pravilo postojat će samo između stupaca koji sadrže sadržaj.
Podrška preglednika
Podrška za raspored više stupaca:
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Bilo koji | 3+ | 1,5+ | 11,1+ | 10+ | 2.3+ | 6.1+ |
Ne zaboravite svoje prefikse!