Propriété CSS column-fill

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>

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.

Support de Navigateurs

50.0 + 12.0 + 52.0
+ 13 -moz-
9.0+ 37.0+


Trouvez-vous cela utile?

Articles Associées