Wie kann ich mit CSS und jQuery ein responsives Spaltenlayout mit Divs unterschiedlicher Höhe erreichen?

CSS-Floating-Divs mit variablen Höhen

Die Verwendung von CSS-Floats zum Anordnen von Divs in einem Container stellt beim Umgang mit variierenden Elementen oft eine Herausforderung dar Höhen. Wie im bereitgestellten Beispiel gezeigt, brechen schwebende Divs in Spalten, wenn sich die Höhen unterscheiden.

CSS-Einschränkungen:

Leider gibt es keine reine CSS-Lösung, die dieses Problem perfekt löst in allen Browsern.

• Floats können Probleme bei der Ausrichtung und verursachen überlappend.
• Inline-Block-Elemente werden nicht richtig um größere Elemente gewickelt.
• Die Verwendung der absoluten Positionierung erfordert eine manuelle Pixelabstimmung, was für dynamische Inhalte unpraktisch sein kann.

Lösung: jQuery Masonry

Die empfohlene Lösung für dieses Szenario ist die Verwendung von jQuery Masonry Plugin. Dieses Plugin ordnet Elemente innerhalb eines Containers intelligent an und passt Zeilen und Spalten automatisch an variable Höhen an.

Implementierung:

1. Einbinden der jQuery Masonry-Bibliothek in Ihrem Projekt:

   <script src="masonry.pkgd.js"></script>

2. Maurerwerk auf dem Ziel initialisieren Container:

   $('#container').masonry();

Mit Masonry ordnet der von Ihnen bereitgestellte Code nun die Divs unabhängig von ihrer Höhe ordnungsgemäß in Spalten an, wie gewünscht. Es bietet eine zuverlässige Lösung für flexible Layouts mit variablen Inhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS und jQuery ein responsives Spaltenlayout mit Divs unterschiedlicher Höhe erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!