Wie erstelle ich mit CSS3 ein responsives Listenlayout mit dynamisch angepassten Spalten?

Anzeigen von Listenelementen in Spalten mit CSS3

Problemstellung:

Erstellen eines responsiven Layouts erfordert die vertikale Anzeige von Listenelementen, wobei die Anzahl der Spalten durch die Breite des Browsers bestimmt wird.

CSS3-Lösung:

CSS3-Spalten bieten eine effiziente Lösung für dieses Layout:

#limheight {
    height: 300px; /* Define the container's height */
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /* Specify the desired number of columns */
}

#limheight li {
    display: inline-block; /* Ensure each list item is treated as a block element */
}

Beispiel:

<ul>

Wenn das Browserfenster breit genug ist, werden die Listenelemente in drei Spalten angezeigt:

1  4  7
2  5  8
3  6  9

Wenn das Browserfenster kleiner wird, passen sich die Spalten dynamisch an, um ein optisch ansprechendes Layout beizubehalten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS3 ein responsives Listenlayout mit dynamisch angepassten Spalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!