CSS3 multi-colonnes
le contenu du texte de CSS3 peut être conçu comme un multi-colonnes mise en page de journal, les exemples suivants:
Ce tutoriel - la science est non seulement la technologie, mais aussi un rêve! Ce tutoriel (www.w3big.com) fournit le tutoriel plus complet basé sur la technologie de programmation présente les bases du HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL, et d'autres langages de programmation. Mais le site propose également un certain nombre d'exemples en ligne, à titre d'exemple, vous pouvez mieux apprendre la programmation.
support du navigateur
Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la méthode.
Immédiatement après le navigateur du numéro ou un préfixe -moz- spécifié.
| propriété | |||||
|---|---|---|---|---|---|
| column-count | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| colonne-gap | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| colonne règle | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| colonne règle-couleur | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| colonne règle de style | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| colonne règle de largeur | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| Colonne de largeur | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
CSS3 propriétés multi-colonnes
Ce chapitre nous allons apprendre quelques propriétés de la colonne de CSS3:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 pour créer plusieurs colonnes
column-count attribut spécifie le nombre de colonnes doivent être divisés.
L'élément exemple suivant <div> dans le texte est divisé en trois:
Exemples
-webkit-column-count: 3; / * Chrome, Safari, Opera * /
-moz-column-count: 3; / * Firefox * /
column-count: 3;
}
Essayez »
espace multi-colonne CSS3 entre les colonnes et les colonnes
column-gap propriété indique l'écart entre les colonnes et les colonnes.
L'exemple suivant spécifie l'écart entre la colonne et la colonne est de 40 pixels:
Exemples
-webkit-column-gap: 40px; / * Chrome, Safari, Opera * /
-moz-column-gap: 40px; / * Firefox * /
colonne-gap: 40px;
}
Essayez »
CSS3 frontières de colonne
column-rule-style propriété spécifie les colonnes de style de la frontière entre les colonnes:
Exemples
-webkit-colonne règle de style: solide; / * Chrome, Safari, Opera * /
-moz-column-rule-style: solide; / * Firefox * /
colonne règle de style: solide;
}
Essayez »
column-rule-width attribut spécifie l'épaisseur de la bordure des deux:
Exemples
-webkit-colonne-règle-width: 1px; / * Chrome, Safari, Opera * /
-moz-column-rule-width: 1px; / * Firefox * /
colonne règle-width: 1px;
}
Essayez »
column-rule-color attribut spécifie la couleur de la bordure des deux:
Exemples
-webkit-colonne-règle-couleur: bleu clair; / * Chrome, Safari, Opera * /
-moz-column-rule-color: lightblue; / * Firefox * /
colonne règle-couleur: bleu clair;
}
Essayez »
column-rule la propriété est un raccourci pour toutes les propriétés de la colonne-rule- *.
L'exemple suivant définit la colonne directement pour l'épaisseur de la bordure, la couleur et le style:
Exemples
-webkit-colonne règle: 1px solid lightblue; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px solid lightblue; / * Firefox * /
colonne règle: 1px solid lightblue;
}
Essayez »
Combien de colonnes à travers l'élément spécifié
L'exemple suivant spécifie l'élément <h2> dans toutes les colonnes:
Exemples
-webkit-colonne-portée: tous; / * Chrome, Safari, Opera * /
colonne portée: tous;
}
Essayez »
Indique la largeur des colonnes
column-width d' attribut définissant la largeur de la colonne.
Exemples
-webkit-column-width: 100px; / * Chrome, Safari, Opera * /
column-width: 100px;
}
Essayez »
CSS3 propriétés multi-colonnes
Le tableau suivant répertorie tous les attributs de CSS3 multi-colonnes:
| propriété | description |
|---|---|
| column-count | Le nombre de colonnes élément spécifié doit être divisé. |
| colonne de remplissage | Indique comment remplir les colonnes |
| colonne-gap | Indique l'écart entre les colonnes et les colonnes |
| colonne règle | Toutes les colonnes rule- * propriété raccourcie |
| colonne règle-couleur | Indique la couleur de la frontière entre les deux |
| colonne règle de style | Spécifiez le style de la frontière entre les deux |
| colonne règle de largeur | Indique l'épaisseur de la frontière entre les deux |
| colonne travée | Indique le nombre de colonnes à traverser l'élément |
| Colonne de largeur | Indique la largeur des colonnes |
| colonnes | Réglage de la colonne de largeur et de la colonne de comptage raccourci |