So erstellen Sie das Mauerwerk Effekte mit nur bootstrap 3 grid-system und css

Mein Problem ist, dass ich die Daten anzeigen wollen, in einem block-format mit der bootstrap 3 grid-system, jedoch möchte ich nicht das die lästigen whitespaces Lücken, das geschehen von der Höhe eingeschränkt auf die oben genannten Zeile. Zum Beispiel, Wenn ich tun:

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

dann habe ich mit der linken Leerraum zwischen zwei Zeilen, was ich versuche zu erreichen, ist eine Mauerwerk-Effekt (wo ein post füllen Sie sitzen in der Nähe der post darüber) mit nur mit CSS, Speziell das bootstrap 3 grid-system. I. E:

So erstellen Sie das Mauerwerk Effekte mit nur bootstrap 3 grid-system und css

Ich weiß, das getan werden kann, mit plugins aber ich will sehen, ob noch einer mehr rein (auch wenn es hacky -) Lösung. Irgendwelche Ideen?

  • sickdesigner.com/masonry-css-getting-awesome-with-css3
  • Die Art und Weise, dass Aibrean schlägt und den link oben, legt das Kästchen in der Spalte Reihenfolge, nicht die box um, Mauerwerk und stellt Sie, wo immer Sie passen, und es ist nicht in Ordnung, aber es ist manchmal in der Nähe.
  • Ich mochte die Verbindung, aber es nicht wirklich die bootstrap 3 grid-system, das ich zusammengestellt habe ein fiddle: jsfiddle.net/vtanz6xc/2, das funktioniert jedoch und verwendet die Spalte system immer noch, ich vermute, das wird jetzt funktionieren.
InformationsquelleAutor Typhomism | 2014-12-18
Schreibe einen Kommentar