Cours IT Bases CSS 030_Mise en page multicolonne Columns

Mise en page multicolonne Columns

Columns (Colonnes) est une propriété utilisée pour créer des mises en page multicolonnes dans la disposition du texte. En définissant le nombre de colonnes et la largeur des colonnes du conteneur, le contenu textuel s’écoule automatiquement entre plusieurs colonnes. Columns (Colonnes) ne convient pas à tous les types de contenu, elle est principalement utilisée pour les mises en page multicolonnes du contenu textuel, et non pour la mise en page de l’ensemble de la page.

• column-count： Spécifie le nombre de colonnes.
• column-width： Spécifie la largeur de chaque colonne.
• column-gap： Spécifie l’espacement entre les colonnes.
• column-rule： Définit la règle (ligne de séparation) entre les colonnes.

Exemple :

1
.example{
2
    column-count: 3;
3
    /* column-width: 200px; */
4
    column-gap: 20px;
5
    column-rule: 1px solid red;
6
}
7
p {
8
    margin: 0 0 10px;
9
}

1
    <div class="example">
2
        <p>Ceci est un paragraphe 111，Ceci est un paragraphe 111，Ceci est un paragraphe 111。</p>
3
        <p>Ceci est un paragraphe 222，Ceci est un paragraphe 222，Ceci est un paragraphe 222。</p>
4
        <p>Ceci est un paragraphe 333，Ceci est un paragraphe 333，Ceci est un paragraphe 333。</p>
5
    </div>

Effet :