Sloupcové pravidlo - Triky CSS

Obsah

Chcete-li sloupce odlišit, můžete mezi každý sloupec přidat svislou čáru. Čára sedí uprostřed mezery sloupu. Pokud jste někdy stylovali border, jste připraveni stylovat 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; )

Vlastnost je zkratka pro column-rule-width, column-rule-style, a column-rule-color, což je stejné jako vzor bordera přijímá stejné hodnoty.

-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-widthmůže mít délku 3pxnebo hodnotu klíčového slova thin.

column-rule-stylemůže být jakákoliv z border-stylehodnot, jako je solid, dotteda dashed.

column-rule-color může být libovolná hodnota barvy.

Na rozdíl od column-gap, column-rulenezabírá místo. Pokud column-rule-widthje hodnota tlustší než column-gappravidlo, pravidlo se rozšíří pod sloupce.

Vertikální pravidlo bude existovat pouze mezi sloupci, které mají obsah.