Largeur de colonne - Astuces CSS

Anonim

Lorsque vous souhaitez conserver vos colonnes à une largeur spécifique, utilisez column-width.

section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )

Le navigateur calculera le nombre de colonnes d'au moins cette largeur pouvant tenir dans l'espace. Pensez column-widthà une suggestion de largeur minimale pour le navigateur.

column-widthest une propriété flexible. Une fois que le navigateur ne peut pas contenir au moins 2 colonnes à la largeur spécifiée, les colonnes s'arrêteront et tomberont dans une seule colonne.

Cette propriété est également utilisée dans le raccourci pour columnset peut être utilisée en tandem avec column-count. Lorsque les deux propriétés sont déclarées, column-countle nombre maximum de colonnes est indiqué.

Valeurs

Vous pouvez régler column-widthà autoou une longueur.

À utiliser autosi vous utilisez également column-countou si vous devez désactiver la propriété. Pensez-y comme un moyen de dire au navigateur de laisser column-countprendre les devants.

Pour spécifier la largeur des colonnes, utilisez une longueur supérieure (ou égale à) 0. Vous pouvez utiliser n'importe quelle unité CSS à l'exception du pourcentage.

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!