CSS3 mise en page en colonnes multiples

Utilisez CSS3Vous pouvez diviser le contenu texte d'un élément en plusieurs colonnes.

Créer une mise en page en colonnes multiples

CSS3Le module de mise en page en colonnes multiples a été introduit pour créer des mises en page en colonnes multiples de manière simple et efficace. Maintenant, vous pouvez créer des mises en page comme celles vues dans les magazines et les journaux sans utiliser de boîtes flottantes. Il s'agit d'un exemple utilisant CSS3Voici un exemple simple de mise en page en colonnes multiples, où certains textes sont divisés en trois colonnes.

p {
　　　　-webkit-column-count:　3;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-count:　3;　/*　Firefox　*/
　　　　　　　　　　　　column-count:　3;　
}

définir le nombre ou la largeur des colonnes

L'attribut CSS, column-count et column-width spécifie si et combien de colonnes seront affichées. column-L'attribut count définit le nombre de colonnes à l'intérieur de l'élément multicol, tandis que column-L'attribut width définit la largeur de la colonne nécessaire.

p {
　　　　-webkit-column-width :　150px;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-width :　150px;　/*　Firefox　*/
　　　　　　　　　　　　column-width :　150px;　
}

Définir l'espacement entre les colonnes

Vous pouvez utiliser l'attribut column-L'attribut gap spécifie l'espacement entre les colonnes. La même marge est appliquée entre chaque colonne. La marge par défaut est normal, ce qui équivaut à1em.

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
}

Définir les règles de colonne

Vous pouvez également utiliser column-L'attribut rule ajoute une ligne entre les colonnes, c'est-à-dire une règle. Il s'agit d'un attribut abrégé utilisé pour définir la largeur, le style et la couleur de la règle dans une seule déclaration. Le column-L'attribut rule utilise les mêmes valeurs que border et outline.

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule:　2px solid red;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule:　2px solid red;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule:　2px solid red;
}

CSS3Propriétés multicolonnaires

Le tableau suivant résume brièvement toutes les propriétés multicolonnaires :