Ak chcete stĺpce odlíšiť, môžete medzi ne pridať stĺpce. Čiara je umiestnená v strede medzery stĺpca. Ak ste niekedy robili štýl border, ste pripravení na styling 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; )Vlastnosť je skratka pre column-rule-width, column-rule-style, a column-rule-color, čo je rovnaké ako vzor bordera prijíma rovnaké hodnoty.
-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-widthmôže byť dĺžka ako 3pxalebo hodnota kľúčového slova ako thin.
column-rule-stylemôže byť akákoľvek z border-stylehodnôt, ako je solid, dotteda dashed.
column-rule-color môže byť ľubovoľná hodnota farby.
Na rozdiel od column-gaptoho column-rulenezaberá miesto. Ak column-rule-widthje hodnota hrubšia ako column-gaptáto, pravidlo sa rozšíri pod stĺpce.
Vertikálne pravidlo bude existovať iba medzi stĺpcami, ktoré majú obsah.
Podpora prehľadávača
Podpora rozloženia viacerých stĺpcov:
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| akýkoľvek | 3+ | 1,5+ | 11,1+ | 10+ | 2,3+ | 6,1+ |
Nezabudnite na svoje predvoľby!
