Kolonne-regel - CSS-tricks

Indholdsfortegnelse

For at gøre kolonner forskellige, kan du tilføje en lodret linje mellem hver kolonne. Linjen sidder i midten af kolonnegabet. Hvis du nogensinde har stylet border, er du klar til at style 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; )

Ejendommen er stenografi for column-rule-width, column-rule-styleog column-rule-color, hvilket er det samme mønster som borderog accepterer de samme værdier.

-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-widthkan have en længde som 3pxeller en nøgleordsværdi som thin.

column-rule-stylekan være en hvilken som helst af de border-styleværdier som solid, dottedog dashed.

column-rule-color kan have en hvilken som helst farveværdi.

I modsætning til column-gap, column-ruleikke optager plads. Hvis den column-rule-widther tykkere end den column-gap, udvides reglen under kolonnerne.

Den lodrette regel findes kun mellem kolonner, der har indhold.