Veergude eristamiseks saate iga veeru vahele lisada vertikaalse joone. Rida asub veerupilu keskel. Kui olete kunagi stiili kujundanud border
, siis olete valmis stiiliks 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; )
Vara on tingliku column-rule-width
, column-rule-style
ja column-rule-color
, mis on sama mustriga nagu border
ja aktsepteerib samu väärtusi.
-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
võib olla nagu pikkus 3px
või märksõna väärtus thin
.
column-rule-style
võib olla mistahes border-style
väärtused nagu solid
, dotted
ja dashed
.
column-rule-color
võib olla mis tahes värvi väärtus.
Erinevalt column-gap
, column-rule
ei võta ruumi. Kui see column-rule-width
on paksem kui column-gap
siis laieneb reegel veergude all.
Vertikaalne reegel eksisteerib ainult veergude vahel, millel on sisu.
Brauseri tugi
Mitme veeruga paigutuse tugi:
Chrome | Safari | Firefox | Ooper | IE | Android | iOS |
---|---|---|---|---|---|---|
Ükskõik | 3+ | 1,5+ | 11,1+ | 10+ | 2.3+ | 6.1+ |
Ärge unustage oma eesliiteid!