Propriété des colonnes CSS
Exemple
Spécifiez la largeur minimale pour chaque colonne et le nombre maximal de colonnes :
div
{
columns: 100px 3;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La columns
propriété est une propriété abrégée pour :
La partie largeur de colonne définira la largeur minimale de chaque colonne, tandis que la partie nombre de colonnes définira le nombre maximum de colonnes. En utilisant cette propriété, la mise en page multi-colonnes se décomposera automatiquement en une seule colonne à des largeurs de navigateur étroites, sans avoir besoin de requêtes multimédias ou d'autres règles.
Valeur par défaut: | voiture voiture |
---|---|
Hérité: | non |
Animable : | oui, voir propriétés individuelles . En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.columns="100px 3" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
columns | 50.0 4.0 -webkit- |
10.0 | 52.0 9.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Syntaxe CSS
columns: auto|column-width column-count|initial|inherit;
Valeurs de propriété
Value | Description |
---|---|
auto | Default value. Sets both the column-width and column-count to "auto" |
column-width | Defines the minimum width for each column |
column-count | Defines the maximum number of columns |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Divisez le texte d'un élément <div> en trois colonnes :
div
{
column-count: 3;
}
Exemple
Spécifiez un espace de 40 pixels entre les colonnes :
div
{
column-gap: 40px;
}
Exemple
Spécifiez la largeur, le style et la couleur de la règle entre les colonnes :
div
{
column-rule: 4px double #ff00ff;
}
Pages connexes
Tutoriel CSS : CSS sur plusieurs colonnes
Référence HTML DOM : propriété des colonnes