Les balises univercelles : div et span...
Sommaire :
Définition et utilisation da la propriété css columns
La propriété columns est un raccourci des propriétés :column-width
column-count
La partie column-width définit la largeur minimale de chaque colonne, tandis que la partie column-count définit le nombre maximal de colonnes. Grâce à cette propriété, la mise en page en plusieurs colonnes se décompose automatiquement en une seule colonne lorsque la largeur du navigateur est réduite, sans qu'il soit nécessaire d'utiliser des requêtes média ou d'autres règles.
La Syntaxe CSS columns
columns: auto|column-width column-count|initial|inherit;
| Valeurs par défaut | auto auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columns="100px 3" |
Valeurs de la propriété columns
auto Valeur par défaut. Définit à la fois la largeur de colonne et le nombre de colonnes à "auto".column-width : Définit la largeur minimale de chaque colonne
column-count : Définit le nombre maximal de colonnes
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.
Exemple : montrant un div avec 3 colonnes dont la largeur de chaque colonne est 100px
div {
columns: 100px 3;
}
Définition et utilisation da la propriété css column-width
La propriété column-width 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. La largeur des colonnes est une suggestion de largeur minimale pour le navigateur. Lorsque le navigateur ne peut pas contenir au moins deux colonnes à la largeur spécifiée, les colonnes s'arrêtent et ne forment plus qu'une seule colonne.
La Syntaxe CSS column-width
column-width: auto|length|initial|inherit;
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | oui En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnWidth="100px" |
Valeurs de la propriété column-width
auto : Valeur par défaut. La largeur des colonnes sera déterminée par le navigateurlength : Une longueur qui spécifie la largeur des colonnes. Le nombre de colonnes sera le nombre minimum de colonnes nécessaires pour afficher tout le contenu de l'élément.
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.
Exemple : élément div avec une largeur de colonne de 100px Copier le code
div {
column-width: 100px;
}
Définition et utilisation da la propriété css column-span
La propriété column-span indique le nombre de colonnes sur lesquelles un élément doit s'étendre.La Syntaxe CSS column-span
column-span: none|all|initial|inherit;
| Valeurs par défaut | none |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.columnSpan="all" |
Valeurs de la propriété column-span
none : Valeur par défaut. L'élément doit s'étendre sur une colonneall : L'élément doit s'étendre sur toutes les colonnes
initial : Définit cette propriété à sa valeur par défaut.
inherit : Hérite cette propriété de son élément parent.
Exemple Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>La propriété css column-span</title>
<style>
div {
width:500px;
column-count: 3;
}
h2 {
column-span: all;
}
</style>
</head>
<body>
<div>
<h2>Cet élément sera étalé sur toute la largeur, et donc les 3 colonnes serons fusionnées en une seule. Le réste du contenu sera divisé en trois colonnes . </h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dolor sed viverra ipsum nunc aliquet bibendum. Tortor condimentum lacinia quis vel eros. Ut eu sem integer vitae justo eget. Risus in hendrerit gravida rutrum quisque. A arcu cursus vitae congue. Volutpat consequat mauris nunc congue nisi vitae suscipit tellus. Id neque aliquam vestibulum morbi. Pharetra vel turpis nunc eget lorem dolor sed. Id leo in vitae turpis massa sed elementum. Fermentum leo vel orci porta non pulvinar. Odio morbi quis commodo odio aenean sed. Eu non diam phasellus vestibulum lorem sed risus. Ultricies integer quis auctor elit. Tempus quam pellentesque nec nam. Amet consectetur adipiscing elit duis tristique sollicitudin nibh sit amet. Pellentesque habitant morbi tristique senectus et netus et
</body>
</html>
Prise en charge de la propriété css dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.Les numéros suivis de -webkit-, -moz-, ou -o- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| columns et column-width | 50 4 -webkit- | 10 | 52 9 -moz- | 9 3.1 -webkit- | 37 15 -webkit- 11.1 -o- |
| column-span | 50 4 -webkit- | 10 | 71 | 9 3.1 -webkit- | 37 15 -webkit- 11.1 -o- |