Lai padarītu kolonnas atšķirīgas, starp katru kolonnu varat pievienot vertikālu līniju. Līnija atrodas kolonnas atstarpes centrā. Ja jūs kādreiz esat veidojis stilu border
, tad esat gatavs veidot 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; )
Īpašums ir saīsinājums column-rule-width
, column-rule-style
un column-rule-color
, kas ir tāds pats modelis kā border
un pieņem tās pašas vērtības.
-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
var būt līdzīgs garumam 3px
vai atslēgvārda vērtībai thin
.
column-rule-style
var būt jebkura no border-style
, piemēram, vērtībām solid
, dotted
un dashed
.
column-rule-color
var būt jebkura krāsu vērtība.
Atšķirībā no tā column-gap
, column-rule
neaizņem vietu. Ja tas column-rule-width
ir biezāks nekā column-gap
tad, noteikums tiks paplašināts zem kolonnām.
Vertikālā kārtula pastāvēs tikai starp kolonnām, kurās ir saturs.
Pārlūka atbalsts
Vairāku kolonnu izkārtojuma atbalsts:
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
Jebkurš | 3+ | 1,5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Neaizmirstiet savus priedēkļus!