Propriété CSS column-fill

❮ Précédent Suivant ❯

La propriété column-fill contrôle le contenu de l'élément quand il est divisé en colonnes. Le contenu peut être balancé ou rempli séquentiellement. Donc, elle a deux valeur: balance et auto. "Balance" est la valeur initiale. Le contenu est divisé également entre les deux colonnes. Si les colonnes sont spécifiées par la valeur "auto", le contenu occupe l'espace dont il a besoin.

Valeur initiale	balance
Appliquée à	Éléments multicol.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.columnFill = "balance";

Syntaxe

column-fill: auto | balance | balance-all |  initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .balance {
      column-count: 4;
      column-rule: 1px solid black;
      column-fill: balance;
      }
    </style>
  </head>
  <h2>Exemple de la propriété column-fill</h2>
  <body>
    <p class="balance">
      C'est un texte qui a été divisé en colonnes
      multiples. La propriété CSS column-fill 
      est utilisée pour écarter les contenus
      toutes les colonnes.
    </p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	Remplit les colonnes séquentiellement.
balance	Divise le contenu également entre les colonnes. Dans media de page, seulement la dernière page est balancée.
balance-all	Divise le contenu également entre les colonnes. Dans media de page, toutes les pages sont balancées.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.