Norėdami stulpelius atskirti, galite pridėti vertikalią liniją tarp kiekvieno stulpelio. Linija yra kolonos tarpo centre. Jei kada nors sukūrėte stilių border, tada esate pasirengęs stilizuoti 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; )Turtas yra sutrumpinimas column-rule-width, column-rule-styleir column-rule-color, kuris yra tas pats modelis, kaip borderir priima tas pačias vertybes.
-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-widthgali būti panašus į ilgį 3pxarba pagal raktinio žodžio vertę thin.
column-rule-stylegali būti bet kuris iš border-stylevertybių, pavyzdžiui solid, dottedir dashed.
column-rule-color gali būti bet kokios spalvos vertė.
Priešingai column-gap, column-ruleneužima vietos. Jei jis column-rule-widthyra storesnis nei column-gaptada, taisyklė bus išplėsta po stulpeliais.
Vertikali taisyklė galios tik tarp turinio turinčių stulpelių.
Naršyklės palaikymas
Kelių stulpelių išdėstymo palaikymas:
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Bet koks | 3+ | 1,5 ir daugiau | 11.1+ | 10+ | 2.3+ | 6.1+ |
Nepamirškite priešdėlių!
