Wie zeige ich Listenelemente in Spalten mit einem responsiven Layout an?

Anzeigen von Listenelementen als Spalten in einem responsiven Layout

Ihr Ziel, Listenelemente je nach Browserbreite vertikal anzuzeigen, kann mit erreicht werden CSS3-Spalten. So geht's:

Verpacken Sie Ihre Listenelemente mithilfe von HTML in ein <div> mit einer festen Höhe und geben Sie die Anzahl der Spalten mithilfe der Column-Count-Eigenschaft an:

<div>

Definieren Sie in CSS die Höhe des Containers und stellen Sie sicher, dass jedes Listenelement im Inline-Block angezeigt wird:

#limheight {
  height: 800px;
  column-count: 3;
}

#limheight li {
  display: inline-block;
}

Wenn die Größe des Browsers geändert wird, passt CSS3 automatisch die Anzahl der Spalten an und ordnet die Listenelemente neu an, um ihre Anzeige zu optimieren. Die spezifische Anzahl der angezeigten Spalten hängt von der verfügbaren Breite und der Breite der Listenelemente selbst ab.

Mit dieser Technik können Sie ein responsives Layout erreichen, bei dem Listenelemente in einer vertikalen Linie mit den Spalten angezeigt werden Dynamische Anpassung basierend auf der Browsergröße.

Das obige ist der detaillierte Inhalt vonWie zeige ich Listenelemente in Spalten mit einem responsiven Layout an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!