CSS plusieurs colonnes
Mise en page CSS multi-colonnes
La mise en page multi-colonnes CSS permet de définir facilement plusieurs colonnes de texte, comme dans les journaux :
Ping quotidien
La
douleur elle-même est l'amour C'est pourquoi c'est pour le moindre à venir, que notre pratique normale supporte pour profiter des conséquences La douleur de la douleur au bureau des Jeux olympiques, ou la douleur du bureau aux Jeux olympiques, il veut être une gêne pour les conséquences, ou il souffre de la douleur du système immunitaire de l'UE à la vérité, l'eros et le consommateur, et la haine régulière du zzril. Pour un temps libre quand on est libéré de nos ados c'est pas le choix
Propriétés CSS multi-colonnes
Dans ce chapitre, vous découvrirez les propriétés multi-colonnes suivantes :
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSS créer plusieurs colonnes
La column-countpropriété spécifie le nombre de colonnes dans lesquelles un élément doit être divisé.
L'exemple suivant divisera le texte de l'élément <div> en 3 colonnes :
Exemple
div
{
column-count: 3;
}
CSS Spécifier l'écart entre les colonnes
La column-gappropriété spécifie l'écart entre les colonnes.
L'exemple suivant spécifie un écart de 40 pixels entre les colonnes :
Exemple
div
{
column-gap: 40px;
}
Règles de colonne CSS
La column-rule-stylepropriété spécifie le style de la règle entre les colonnes :
Exemple
div
{
column-rule-style: solid;
}
La column-rule-widthpropriété spécifie la largeur de la règle entre les colonnes :
Exemple
div
{
column-rule-width: 1px;
}
La column-rule-colorpropriété spécifie la couleur de la règle entre les colonnes :
Exemple
div
{
column-rule-color: lightblue;
}
La column-rulepropriété est une propriété abrégée pour définir toutes les propriétés column-rule-* ci-dessus.
L'exemple suivant définit la largeur, le style et la couleur de la règle entre les colonnes :
Exemple
div
{
column-rule: 1px solid lightblue;
}
Spécifier le nombre de colonnes qu'un élément doit couvrir
La column-spanpropriété spécifie le nombre de colonnes sur lesquelles un élément doit s'étendre.
L'exemple suivant spécifie que l'élément <h2> doit s'étendre sur toutes les colonnes :
Exemple
h2 {
column-span: all;
}
Spécifiez la largeur de la colonne
La column-widthpropriété spécifie une largeur optimale suggérée pour les colonnes.
L'exemple suivant spécifie que la largeur optimale suggérée pour les colonnes doit être de 100 pixels :
Exemple
div {
column-width: 100px;
}
Propriétés CSS multi-colonnes
Le tableau suivant répertorie toutes les propriétés multi-colonnes :
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |