Pentru a face coloane distincte, puteți adăuga o linie verticală între fiecare coloană. Linia se află în centrul golului coloanei. Dacă ați stilat vreodată border, atunci sunteți gata de stil 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; )Proprietatea este prescurtată pentru column-rule-width,, column-rule-styleși column-rule-color, care este același model ca borderși acceptă aceleași valori.
-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-widthpoate fi o lungime ca 3pxsau o valoare de cuvânt cheie cum ar fi thin.
column-rule-stylepoate fi oricare dintre border-stylevalorile , cum ar fi solid, dottedși dashed.
column-rule-color poate fi orice valoare de culoare.
Spre deosebire de column-gap, column-rulenu ocupă spațiu. Dacă column-rule-widtheste mai groasă decât column-gapregula, regula se va extinde sub coloane.
Regula verticală va exista numai între coloanele care au conținut.
Suport pentru browser
Suport pentru aspectul cu mai multe coloane:
| Crom | Safari | Firefox | Operă | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Orice | 3+ | 1.5+ | 11.1+ | Peste 10 ani | 2.3+ | 6.1+ |
Nu uitați prefixele!