Wie kann ich mit CSS ein nahtloses mehrzeiliges Layout aus Divs mit variabler Höhe erstellen?

Floating Divs mit variablen Höhen in CSS

Problemstellung

Das Ziel ist die Anzeige eine unendliche Anzahl von Divs mit unterschiedlichen Höhen innerhalb eines übergeordneten Containers mit fester Breite. Die Divs sollten nahtlos in Zeilen übergehen, wie im bereitgestellten Bild dargestellt. Die Verwendung von CSS-Floats oder Inline-Block-Anzeige führt jedoch zu Höhenunterschieden, die das gewünschte Layout stören.

Lösung

Bedauerlicherweise lässt sich dieses Layout nur mit reinem CSS nicht erreichen in allen gängigen Browsern möglich. Herkömmliche Lösungen wie schwebende Divs oder Inline-Block-Anzeigen stoßen aufgrund der unvorhersehbaren Höhen der Divs auf Herausforderungen.

jQuery Masonry

Um dieses Problem zu beheben, wird empfohlen Nutzen Sie die Funktionen von jQuery Masonry, einer leistungsstarken JavaScript-Bibliothek, die eine reaktionsfähige Layoutverwaltung mit anpassbaren Konfigurationen ermöglicht. Masonry analysiert die Höhen der Divs dynamisch und ordnet sie automatisch in Spalten und Reihen an, wobei in jeder Reihe gleiche Höhen beibehalten werden, wodurch die Raumnutzung innerhalb des Containers optimiert wird.

Beispiel

Bedenken Sie den bereitgestellten CSS- und HTML-Code, der zunächst versucht, das Problem mit fehlerhaften CSS-Ansätzen zu lösen. Durch die Integration von jQuery Masonry wie unten gezeigt können wir die Höhenvariabilität effektiv angehen und das gewünschte Layout erreichen:

<script src="masonry.pkgd.min.js"></script>
<script>
    $(function() {
        $('#holder').masonry({
            itemSelector: '.box',
            columnWidth: 100
        });
    });
</script>

Durch die Verwendung von Masonry passen die Divs ihre Höhen autonom an, was zu einem sauberen und ästhetisch ansprechenden Raster führt. wie Layout. Diese Lösung beseitigt die manuellen Pixeloptimierungs- und Browserkompatibilitätsprobleme, die mit reinen CSS-Ansätzen verbunden sind.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS ein nahtloses mehrzeiliges Layout aus Divs mit variabler Höhe erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!