Wie kann ich Listenelemente mithilfe von CSS als Spalten anzeigen?

Anzeigen von Listenelementen als Spalten mit CSS

Es kann ein responsives Layout erstellt werden, in dem Listenelemente vertikal fließen und sich an die verfügbare Breite anpassen Verwendung von CSS-Spalten. Befolgen Sie diese Schritte:

1. Definieren Sie das CSS für das Containerelement und geben Sie dessen Höhe und die Anzahl der gewünschten Spalten an:

#limheight {
    height: 300px; /* Adjust to desired fixed height */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; /* Placeholder value; can be adjusted */
}

2. Legen Sie die Anzeigeeigenschaft fest der Listenelemente, die inline blockiert werden sollen, damit sie innerhalb von Spalten umbrochen werden können:

#limheight li {
    display: inline-block; /* Necessary for wrapping */
}

3. Fügen Sie den HTML-Code für die Liste ein, eingeschlossen in einem Containerelement mit der angegebenen CSS-Klasse:

<div>

Wenn die Größe des Browserfensters geändert wird, passen die Listenelemente automatisch ihre Anordnung innerhalb der angegebenen Anzahl von Spalten an und behalten so den gewünschten vertikalen Fluss bei.

Das obige ist der detaillierte Inhalt vonWie kann ich Listenelemente mithilfe von CSS als Spalten anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!