Stupac-pravilo - CSS-trikovi

Sadržaj

Da bi stupci bili različiti, možete dodati okomitu crtu između svakog stupca. Linija se nalazi u središtu razmaka kolone. Ako ste ikad oblikovali border, spremni ste za oblikovanje 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; )

Objekt je skraćenica za column-rule-width, column-rule-stylei column-rule-color, što je isti uzorak kao borderi prihvaća iste vrijednosti.

-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-widthmože biti duljina poput 3pxili vrijednost ključne riječi poput thin.

column-rule-stylemože biti bilo koji od border-stylevrijednosti kao što su solid, dottedi dashed.

column-rule-color može biti bilo koja vrijednost boje.

Za razliku od toga column-gap, column-rulene zauzima prostor. Ako column-rule-widthje debljina od column-gaptada, pravilo će se proširiti ispod stupaca.

Okomito pravilo postojat će samo između stupaca koji sadrže sadržaj.