IT-Kurs CSS-Grundlagen 030_Mehrspalten-Layout Columns

Mehrspalten-Layout Columns

Columns (Spalten) ist eine Eigenschaft zur Erstellung mehrspaltiger Layouts in der Textanordnung. Durch das Festlegen der Spaltenzahl und Spaltenbreite des Containers wird der Textinhalt automatisch zwischen mehreren Spalten verteilt. Columns (Spalten) eignet sich nicht für alle Inhaltstypen, wird hauptsächlich für mehrspaltige Layouts von Textinhalten verwendet und nicht für die Gesamtseitenlayout-Gestaltung.

• column-count： Gibt die Anzahl der Spalten an.
• column-width： Gibt die Breite jeder Spalte an.
• column-gap： Gibt den Abstand zwischen den Spalten an.
• column-rule： Legt die Regel (Trennlinie) zwischen Spalten fest.

Beispiel:

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>Dies ist ein Absatz 111，Dies ist ein Absatz 111，Dies ist ein Absatz 111。</p>
3
        <p>Dies ist ein Absatz 222，Dies ist ein Absatz 222，Dies ist ein Absatz 222。</p>
4
        <p>Dies ist ein Absatz 333，Dies ist ein Absatz 333，Dies ist ein Absatz 333。</p>
5
    </div>

Effekt: