Propriété CSS column-width
Exemple
Spécifiez que la largeur de la colonne doit être de 100 pixels :
div
{
column-width: 100px;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La column-width
propriété spécifie la largeur de la colonne.
Le nombre de colonnes sera le nombre minimum de colonnes nécessaires pour afficher tout le contenu de l'élément.
column-width
est une propriété flexible. Pensez
column-width
à une suggestion de largeur minimale pour le navigateur. Une fois que le navigateur ne peut pas contenir au moins deux colonnes à la largeur que vous avez spécifiée, les colonnes s'arrêteront et tomberont dans une seule colonne.
Valeur par défaut: | auto |
---|---|
Hérité: | non |
Animable : | Oui. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.columnWidth="100px" |
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 | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Syntaxe CSS
column-width: auto|length|initial|inherit;
Valeurs de propriété
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
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é columnWidth