column-count
La propriété column-count
décrit le nombre de colonnes d'un élément lorsqu'on utilise une disposition en colonnes.
Exemple interactif
Syntaxe
/* Valeurs avec un mot-clé */
column-count: auto;
/* Valeurs numériques */
/* Type <number> */
column-count: 3;
/* Valeurs globales */
column-count: inherit;
column-count: initial;
column-count: unset;
Valeurs
auto
-
Un mot-clé qui indique que le nombre de colonnes doit être déterminé à partir d'autres propriétés CSS (par exemple à partir de
column-width
). <number>
-
Un nombre (type
<integer>
) strictement positif qui décrit le nombre idéal de colonnes avec lequel répartir le contenu de l'élément. Si la valeur decolumn-width
n'est pasauto
, cette propriété indique simplement le nombre maximal de colonnes autorisé.
Syntaxe formelle
Exemples
CSS
.exemple {
border: 10px solid #000000;
column-count:3;
}
HTML
<p class="exemple">
« Mais alors, » pensa Alice, « ne serai-je donc
jamais plus vieille que je ne le suis maintenant ?
D’un côté cela aura ses avantages, ne jamais être
une vieille femme. Mais alors avoir toujours des
leçons à apprendre ! Oh, je n’aimerais pas cela du
tout. »
« Oh ! Alice, petite folle, » se répondit-elle.
« Comment pourriez-vous apprendre des leçons ici ?
Il y a à peine de la place pour vous, et il n’y en
a pas du tout pour vos livres de leçons. »
</p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Multi-column Layout Module La définition de 'column-count' dans cette spécification. |
Version de travail | Définition initiale. |
Valeur initiale | auto |
---|---|
Applicabilité | Block containers except table wrapper boxes |
Héritée | non |
Valeur calculée | comme spécifié |
Type d'animation | un entier |
Compatibilité des navigateurs
BCD tables only load in the browser