Pour rendre les colonnes distinctes, vous pouvez ajouter une ligne verticale entre chaque colonne. La ligne se trouve au centre de l'espace de colonne. Si vous avez déjà stylé border, vous êtes prêt à le coiffer 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; )La propriété est un raccourci pour column-rule-width, column-rule-styleet column-rule-color, ce qui est le même schéma que borderet accepte les mêmes valeurs.
-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-widthpeut être une longueur comme 3pxou une valeur de mot clé comme thin.
column-rule-stylepeut être l' une des border-stylevaleurs telles que solid, dottedet dashed.
column-rule-color peut être n'importe quelle valeur de couleur.
Contrairement column-gap, column-rulene prend pas de place. Si le column-rule-widthest plus épais que le, column-gapla règle s'étendra sous les colonnes.
La règle verticale n'existe qu'entre les colonnes qui ont du contenu.
Prise en charge du navigateur
Prise en charge de la mise en page multi-colonnes:
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Tout | 3+ | 1,5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
N'oubliez pas vos préfixes!