CSS3 multi colonne-Layout
La mise en page CSS3 multi-colonne permet de définir facilement plusieurs colonnes de texte - tout comme dans les journaux:
Daily Ping
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.
support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
Numbers suivis par -webkit- ou -moz- précisent la première version qui a travaillé avec un préfixe.
| Propriété | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Propriétés CSS3 Multi-colonne
Dans ce chapitre, vous allez en apprendre davantage sur 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
CSS3 Créer plusieurs colonnes
La column-count propriété spécifie le nombre de colonnes d' un élément doit être divisé en.
L'exemple suivant va diviser le texte dans le <div> élément en 3 colonnes:
Exemple
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Essayez - le vous - même » CSS3 Indiquez l'écart entre les colonnes
La column-gap propriété indique l'écart entre les colonnes.
L'exemple suivant spécifie un écart de 40 pixels entre les colonnes:
Exemple
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Essayez - le vous - même » Règles de colonne CSS3
La column-rule-style propriété spécifie le style de la règle entre les colonnes:
Exemple
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Essayez - le vous - même » La column-rule-width propriété spécifie la largeur de la règle entre les colonnes:
Exemple
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Essayez - le vous - même » La column-rule-color propriété spécifie la couleur de la règle entre les colonnes:
Exemple
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Essayez - le vous - même » La column-rule la propriété est un raccourci pour définir toutes les propriétés de la colonne-rule- * ci - dessus.
L'exemple suivant définit la largeur, le style et la couleur de la règle entre les colonnes:
Exemple
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Essayez - le vous - même » Spécifiez le nombre de colonnes d'un élément doit Span
La column-span propriété spécifie le nombre de colonnes d' un élément devrait étendre sur.
L'exemple suivant spécifie que le <h2> élément devrait étendre sur toutes les colonnes:
Exemple
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Essayez - le vous - même » Spécifiez la largeur de colonne
La column-width propriété spécifie une proposition, la largeur optimale pour les colonnes.
L'exemple suivant spécifie que le suggère, la largeur optimale pour les colonnes devrait être 100px:
Exemple
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Essayez - le vous - même » CSS3 Multi-colonnes Propriétés
Le tableau suivant répertorie toutes les propriétés multi-colonnes:
| Propriété | La description |
|---|---|
| column-count | Indique le nombre de colonnes d'un élément doit être divisé en |
| column-fill | Indique comment remplir les colonnes |
| column-gap | Indique l'écart entre les colonnes |
| column-rule | Un raccourci pour définir toutes les propriétés de la colonne-rule- * |
| column-rule-color | Indique 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 | Indique la largeur de la règle entre les colonnes |
| column-span | Indique le nombre de colonnes d'un élément devrait étendre sur |
| column-width | Indique une proposition, la largeur optimale pour les colonnes |
| columns | Un raccourci pour définir la colonne de largeur et de la colonne de comptage |