Kolonne-regel - CSS-triks

Innholdsfortegnelse

For å gjøre kolonnene forskjellige, kan du legge til en loddrett linje mellom hver kolonne. Linjen sitter midt i kolonnegapet. Hvis du noen gang har stylet border, er du klar til å 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; )

Egenskapen er en forkortelse for column-rule-width, column-rule-styleog column-rule-colorsom er det samme mønster som borderog aksepterer de samme verdier.

-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 ha en lengde som 3pxeller en søkeordverdi som thin.

column-rule-stylekan være noen av de border-styleverdier som solid, dotted, og dashed.

column-rule-color kan være hvilken som helst fargeverdi.

I motsetning til column-gap, column-ruletar ikke plass. Hvis den column-rule-widther tykkere enn den column-gap, utvides regelen under kolonnene.

Den vertikale regelen vil bare eksistere mellom kolonner som har innhold.