Az oszlopok megkülönböztetéséhez hozzáadhat egy függőleges vonalat az egyes oszlopok közé. A vonal az oszloprés közepén helyezkedik el. Ha valaha is stílusozott border, akkor készen áll a stílusra 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; )Az ingatlan a rövidítés column-rule-width, column-rule-styleés column-rule-color, ami ugyanazt a mintát, mint border, és elfogadja ugyanazokat az értékeket.
-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-widthlehet hosszúságú 3pxvagy kulcsszóértékű thin.
column-rule-stylebármelyik lehet a border-stylehasonló értékek solid, dottedés dashed.
column-rule-color bármilyen színérték lehet.
Ellentétben column-gap, column-rulenem foglal helyet. Ha a column-rule-widthvastagabb, mint az column-gapakkor a szabály kibővül az oszlopok alatt.
A függőleges szabály csak a tartalommal rendelkező oszlopok között létezik.
Böngésző támogatás
Több oszlopos elrendezés támogatása:
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Bármi | 3+ | 1,5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Ne felejtsd el az előtagjaidat!