CSS Colonnes Multiples
Mise en Page Multi-colonnes CSS
Le module de mise en page multi-colonnes CSS permet de définir facilement plusieurs colonnes de texte, tout comme dans les journaux :
Multi Colonne
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.Propriétés Multi-colonnes CSS
Dans ce chapitre, vous apprendrez les propriétés multi-colonnes suivantes :
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
Créer Plusieurs Colonnes CSS
La propriété CSS column-count spécifie le nombre de colonnes dans lesquelles un élément doit être divisé.
Exemple
Divisez le texte dans l'élément <div> en 3 colonnes :
div {
column-count: 3;
} Espace entre les Colonnes CSS
La propriété CSS column-gap spécifie l'espace entre les colonnes.
Exemple
Spécifiez un espace de 40 pixels entre les colonnes :
div {
column-gap: 40px;
} Règle de Colonne CSS
La propriété CSS column-rule-style spécifie le style de la règle verticale entre les colonnes.
Exemple
div {
column-rule-style: solid;
} La propriété CSS column-rule-width spécifie la largeur de la règle verticale entre les colonnes.
Exemple
div {
column-rule-width: 1px;
} La propriété CSS column-rule-color spécifie la couleur de la règle verticale entre les colonnes.
Exemple
div {
column-rule-color: lightblue;
} La propriété CSS column-rule est une propriété abrégée pour définir toutes les propriétés column-rule-* ci-dessus.
Exemple
Définit la largeur, le style et la couleur de la règle verticale entre les colonnes :
div {
column-rule: 1px solid lightblue;
} Étendue de Colonne CSS
La propriété CSS column-span spécifie combien de colonnes un élément (typiquement un en-tête) doit couvrir.
Exemple
Spécifiez que l'élément <h2> doit s'étendre sur toutes les colonnes (et être centré) :
h2 {
column-span: all;
text-align: center;
} Largeur de Colonne CSS
La propriété CSS column-width spécifie une largeur suggérée et optimale pour chaque colonne.
Ici, le navigateur déterminera le nombre de colonnes en fonction de cette largeur et de l'espace disponible.
Exemple
Spécifiez que la largeur suggérée et optimale pour les colonnes doit être de 100px :
div {
column-width: 100px;
} Propriétés Multi-colonnes CSS
Le tableau suivant répertorie toutes les propriétés multi-colonnes :
| Propriété | Description |
|---|---|
| column-count | Spécifie le nombre de colonnes dans lesquelles un élément doit être divisé |
| column-fill | Spécifie comment remplir les colonnes |
| column-gap | Spécifie l'espace entre les colonnes |
| column-rule | Une propriété abrégée pour définir toutes les propriétés column-rule-* |
| column-rule-color | Spécifie la couleur de la règle entre les colonnes |
| column-rule-style | Spécifie le style de la règle entre les colonnes |
| column-rule-width | Spécifie la largeur de la règle entre les colonnes |
| column-span | Spécifie combien de colonnes un élément doit couvrir |
| column-width | Spécifie une largeur suggérée et optimale pour les colonnes |
| columns | Une propriété abrégée pour définir column-width et column-count |