1. Zuhause
  2. Frage und Antwort
  3. Materialise css Karten mit gleicher Breite, aber unterschiedlicher Höhe

Materialise css Karten mit gleicher Breite, aber unterschiedlicher Höhe

2016-07-13 15 views
1

Ich versuche einen Bildschirm zu erstellen, der mehrere Karten mit verschiedenen Höhen zeigt, aber sobald sie unterschiedliche Höhen haben, senden sie es an den tiefsten der folgenden: resultMaterialise css Karten mit gleicher Breite, aber unterschiedlicher Höhe

, aber ich möchte in den nächsten ein bis passen sollte es direkt darunter, wie folgt aus: desired result

für Meine Struktur ist einfach:

<body> 
    <main> 
     <div class="section"> 
      <div class="row container"> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
       <div class="col s12 m6 l4">CARD</div> 
      </div> 
     </div> 
    </main> 
</body>

ich habe versucht, schwimmt an den cols divs mit aber nichts hat funktioniert o ut ... Weiß jemand, wie man etwas wie ich will? Vielen Dank.

Quelle

2016-07-13 Rodrigo Butzke

Antwort

3

Ich habe mit Flexbox versucht, aber hat nicht funktioniert.

Aber ich habe diese erstaunliche jQuery-Bibliothek gefunden: http://masonry.desandro.com/

geändert meine Struktur zu

<body> 
    <main> 
     <div class="section"> 
      <div class="row container"> 
       <div class="cards"> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
        <div class="col s12 m6 l4">CARD</div> 
       </div> 
      </div> 
     </div> 
    </main> 
</body>

Und verwendet diese Zeilen:

$('.cards').masonry({ 
    itemSelector: '.col', 
});

Quelle

2016-07-14 18:41:59

Verwandte Themen

 Verwandte Themen