Sütunları birbirinden ayırmak için her sütun arasına dikey bir çizgi ekleyebilirsiniz. Çizgi, kolon boşluğunun ortasında yer alır. Şimdiye kadar tasarladıysanız border, stil vermeye hazırsınız demektir 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; )Özelliği için kısaltmadır column-rule-width, column-rule-styleve column-rule-coloraynı model olan, borderve aynı değerleri kabul eder.
-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-widthgibi bir uzunluk 3pxveya gibi bir anahtar kelime değeri olabilir thin.
column-rule-styleherhangi biri olabilir border-stylegibi değerler solid, dottedve dashed.
column-rule-color herhangi bir renk değeri olabilir.
Aksine column-gap, column-ruleyer kaplamaz. Eğer column-rule-widthdaha kalınsa column-gap, kural sütunların altına genişleyecektir.
Dikey kural yalnızca içeriğe sahip sütunlar arasında var olacaktır.
Tarayıcı Desteği
Çok sütunlu düzen desteği:
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Hiç | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Ön eklerinizi unutmayın!
