Propriété CSS column-fill
Exemple
Spécifiez comment remplir les colonnes :
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La column-fill
propriété spécifie comment remplir les colonnes, équilibrées ou non.
Astuce : Si vous ajoutez une hauteur à un élément multi-colonnes, vous pouvez contrôler la façon dont le contenu remplit les colonnes. Le contenu peut être équilibré ou rempli séquentiellement.
Valeur par défaut: | équilibre |
---|---|
Hérité: | non |
Animable : | non. En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.columnFill="auto" |
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 -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Syntaxe CSS
column-fill: balance|auto|initial|inherit;
Valeurs de propriété
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
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é columnFill