La propriété columns
est une propriété raccourcie permettant de définir les deux propriétés column-width
et column-count
en même temps.
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | éléments non-remplacés de type block ou table , ou éléments de type table-cell ou inline-block |
Héritée | non |
Média | visuel |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Ordre canonique | l'ordre d'apparition dans la grammaire formelle des valeurs |
Syntaxe
columns: 1em; columns: 1; columns: auto; columns: 1 auto; columns: auto 12em; columns: auto auto;
Valeurs
<'column-width'>
- Une valeur de longueur (type
<length>
) fournissant une indication quant à la largeur optimale de la colonne. La colonne réelle peut être plus large (pour remplir l'espace disponible) ou plus étroite (s'il n'y a pas suffisamment d'espace disponible). La longueur exprimée doit être strictement positive, dans le cas contraire, la déclaration sera invalide. <'column-count'>
- Une quantité (type
<integer>
) strictement positive qui décrit le nombre idéal de colonnes parmi lesquelles disposer le contenu de l'élément. Si la valeur decolumn-width
n'est pas une valeur automatique, cette valeur indique simplement le nombre maximal de colonnes.
Syntaxe formelle
<'column-width'> || <'column-count'>
Exemples
CSS
.exemple { border: 10px solid #000000; -moz-columns:3; -webkit-columns:3; columns: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 'columns' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |