Kolonnas noteikums - CSS-triki

Satura rādītājs

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-styleun column-rule-color, kas ir tāds pats modelis kā borderun 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-widthvar būt līdzīgs garumam 3pxvai atslēgvārda vērtībai thin.

column-rule-stylevar būt jebkura no border-style, piemēram, vērtībām solid, dottedun dashed.

column-rule-color var būt jebkura krāsu vērtība.

Atšķirībā no tā column-gap, column-ruleneaizņem vietu. Ja tas column-rule-widthir biezāks nekā column-gaptad, 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!

Interesanti raksti...