Wie kann ich Divs mit variabler Höhe mithilfe von CSS und JavaScript in übersichtlichen Zeilen anordnen?

CSS-Floating-Divs mit variablen Höhen

Die Herausforderung besteht darin, eine unendliche Anzahl von Divs mit variabler Höhe in einem übergeordneten Element mit fester Breite unterzubringen. Stellen Sie sicher, dass sie sich in sauberen Reihen anordnen, wie im bereitgestellten Bild dargestellt. Versuche, Floats oder Inline-Block-Anzeigeeigenschaften zu verwenden, haben sich aufgrund von Höhenschwankungen als schwierig erwiesen.

Lösung:

Leider ist es derzeit nicht möglich, dieses Problem allein mit CSS zu lösen in allen Browsern. Float- und Inline-Block-Ansätze haben beide Einschränkungen. Positionsbasierte Lösungen erfordern manuelle Pixelanpassungen oder verlassen sich auf serverseitigen Code für die automatisierte Pixelabstimmung.

jQuery Masonry to the Rescue:

Um diese Situation effektiv zu bewältigen, Es wird empfohlen, die Leistungsfähigkeit von jQuery Masonry zu nutzen, einer Bibliothek, die speziell für die dynamische Organisation und Anordnung von Elementen entwickelt wurde. Masonry passt das Layout von Divs automatisch an ihre Höhe und den verfügbaren Platz an, was zu einer optisch ansprechenden und reaktionsfähigen Anordnung führt.

Implementierung:

Um Masonry zu implementieren, laden Sie es einfach herunter Laden Sie die Bibliothek herunter und fügen Sie sie in Ihre HTML-Datei ein. Initialisieren Sie dann Masonry mit Ihrem Div-Container als Ziel:

var container = document.querySelector('#holder');
var mason = new Masonry(container, {});

Dadurch kann Masonry die Div-Anordnung innerhalb des Containers verwalten und sicherstellen, dass sie unabhängig von ihren Höhenunterschieden optimal platziert werden.

Vorteile von jQuery Masonry:

• Automatische Anpassung des Elements Layout
• Unterstützung für unregelmäßige Elementhöhen
• Dynamische Reaktion auf Seitengrößenänderung
• Einfache und benutzerfreundliche Implementierung

Das obige ist der detaillierte Inhalt vonWie kann ich Divs mit variabler Höhe mithilfe von CSS und JavaScript in übersichtlichen Zeilen anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!