Divs in einem responsiven Raster-Layout ohne vertikale Lücke

Question

Ich habe eine Sammlung von div s (Karten). Jeder hat einen Titel, eine Beschreibung und ein Bild (alle unterschiedlichen Längen/Größen).

Ich möchte diese "nett" auf dem Bildschirm anzeigen.

Mit "schön" meine ich, ich möchte das Bild ein Thumbnail sein - horizontal zentriert nach dem Titel und der Beschreibung.

Noch wichtiger, ich möchte die Karte (mit div) nacheinander (horizontal, dann vertikal) und ohne große vertikale Lücken positioniert werden.

Beispiel:

Ich Bootstrap die reaktions Spalte Klassen (col-lg, col-md, col-sm) und img-responsive. Das Hauptproblem, das ich treffe, sind die großen vertikalen Lücken.

Hier ist ein attempt von mir.

Irgendwelche CSS-Tricks, um ein Layout zu erreichen, das meinem obigen Bild ähnlich ist? (Nur mit weniger Spalten auf kleineren Displays).

Answer 1

Der beste Weg, um dieses Layout zu erreichen, ist Masonry

Schritt für Schritt:

1. Sie, indem Sie diesen starten:

   <script src="/path/to/masonry.pkgd.min.js">`</script> 
   

   oder CDN mit

2. dann würde dies Ihre HTML-Markup

   <div class="grid"> 
       <div class="grid-item">...</div> 
       <div class="grid-item grid-item--width2">...</div> 
       <div class="grid-item">...</div> 
       ... 
   </div> 
   

3. Und das CSS sein

   .grid-item { width: 200px; } 
   .grid-item--width2 { width: 400px; } 
   

4. Wenn Sie jQuery-Bibliothek verwenden, können Sie es als Plugin verwenden und es so initialisieren:

   $('.grid').masonry({ 
       // options 
       itemSelector: '.grid-item', 
       columnWidth: 200 
   }); 
   

5. ansonsten können Sie mit Vanille JS wie folgt initialisieren:

   var elem = document.querySelector('.grid'); 
   var msnry = new Masonry(elem, { 
       // options 
       itemSelector: '.grid-item', 
       columnWidth: 200 
   });  
   // element argument can be a selector string 
   // for an individual element 
   var msnry = new Masonry('.grid', { 
       // options 
   }); 
   

PS- Sie auch in HTML ohne JS initialisieren.

Weitere Hinweise finden Sie unter Get here Gestartet

---

CSS nur verwenden, können Sie entweder die CSS Spalten oder CSS Flexbox.aber es wird in Cross-Browser-Kompatibilität mit dem Mauerwerk Plugin verlieren