Propriété column-width
La propriété column-width définit la largeur
des colonnes dans un texte multicolonne. La valeur
de la propriété peut être n'importe quelle unité
de taille, à l'exception des pourcentages, ou le mot-clé
auto (par défaut). Lorsque la valeur est
auto, le navigateur détermine automatiquement la largeur
optimale des colonnes en se basant sur column-count
et column-gap.
Syntaxe
sélecteur {
column-width: valeur;
}
Exemple . Largeur spécifiée
Dans cet exemple, la largeur de colonne column-width
est définie à 150px, et leur nombre column-count
est réglé sur auto. En conséquence,
la largeur des colonnes sera de 150px, leur nombre
et l'espacement entre elles seront déterminés automatiquement par le navigateur :
<div id="elem">
some long text
</div>
#elem {
column-count: auto;
column-width: 150px;
text-align: justify;
}
:
Exemple . Valeur auto
Dans cet exemple, le texte sera divisé en 3
colonnes (car column-count est défini
sur 3), tandis que leur largeur sera calculée
automatiquement :
<div id="elem">
some long text
</div>
#elem {
column-width: auto;
column-count: 3;
text-align: justify;
}
:
Voir aussi
-
la propriété
column-count,
qui définit le nombre de colonnes -
la propriété
column-gap,
qui définit l'espacement entre les colonnes -
la propriété
column-rule,
qui définit la bordure entre les colonnes -
la propriété
column-span,
qui définit le nombre de colonnes sur lesquelles un élément doit s'étendre -
la propriété
columns,
qui est une propriété raccourcie pour le multicolonnage
