Oszlop-szabály - CSS-trükkök

Tartalomjegyzék

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!

érdekes cikkek...