Attribut COLUMNS
Rôle
L’attribut columns permet de disposer le contenu d’un bloc en plusieurs colonnes
Cet attribut est un raccourci de column-count qui spécifie un nombre de colonnes et de column-widthqui spécifie la largeur des colonnes
Note : La largeur des colonnes ne sera jamais en dessous de la valeur column-width même si vous réduisez la taille de la fenêtre
Version : CSS3
Héritage (inherit) : non
Propriété Javascript : element.style.columns
Testez vous-même cet attribut
Utilisez Codepen.
– Le code CSS
p {
-webkit-columns: 100px 3;
-moz-columns: 100px 3;
columns: 100px 3;
}
– Le code HTML
<h1>titre</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod beatae magni unde consequatur ipsa deserunt vero deleniti voluptates accusantium, non laboriosam, earum, animi ab expedita impedit obcaecati molestiae nihil soluta Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident explicabo cupiditate perspiciatis nemo, laudantium repudiandae quo qui voluptatibus doloremque voluptates tempora, assumenda unde, alias cumque esse asperiores. Repellendus quidem, inventore..</p>
Résultat
Compatibilité
A partir de IE-10. Pour implémenter cet attribut sur un ensemble de navigateur, vous devez utilisez les préfixes -webkit- (Chrome, Safari, Android…), -moz- (Mozilla).
Valeurs
Les différentes valeurs de l’attribut columns sont:
- auto
- La largeur et le nombre de colonne sont calculés automatiquement. Valeur par défaut
Syntaxe :
columns : auto - largeur de colonne
- Voir l’attribut column-widthIl s’agit de la valeur minimum de la largeur d’une colonne. Vous ne pouvez donc pas réduire la taille de chaque colonne (en augmentant le nombre de colonnes) en dessous de cette valeur
- nombre de colonnes
- Voir l’attribut column-countIl s’agit du nombre maximum de colonnes à afficher. Ce nombre peut diminuer si vous réduisez la taille de la fenêtre ou si vous augmentez la valeur de l’attibut column-width
- initial
- Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
columns : initial - inherit
- Hérite de la même propriété que l’élément parent.
Syntaxe :
columns : inherit
A voir aussi
display– clear– z-index– flex– align-content– align-items– align-self– vertical-align
