Voit tehdä sarakkeista erilliset lisäämällä pystysuoran viivan kunkin sarakkeen väliin. Viiva istuu sarakevälin keskellä. Jos olet koskaan muotoillut border
, olet valmis muotoilemaan 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; )
Omaisuus on vain lyhenne column-rule-width
, column-rule-style
ja column-rule-color
, mikä on sama kuvio kuin border
ja hyväksyy samat arvot.
-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
voi olla pituus 3px
tai avainsanan arvo thin
.
column-rule-style
voi olla mikä tahansa border-style
arvoja, kuten solid
, dotted
ja dashed
.
column-rule-color
voi olla mikä tahansa väri-arvo.
Toisin column-gap
, column-rule
ei vie tilaa. Jos se column-rule-width
on paksumpi kuin column-gap
sitten, sääntö laajenee sarakkeiden alle.
Vertikaalinen sääntö on olemassa vain sisältöä sisältävien sarakkeiden välillä.
Selaimen tuki
Usean sarakkeen asettelun tuki:
Kromi | Safari | Firefox | Ooppera | IE | Android | iOS |
---|---|---|---|---|---|---|
Minkä tahansa | 3+ | 1,5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Älä unohda etuliitteitäsi!