Drei-Spalten-Layout mit Block von verschiedenen Höhen

Question

Ich habe einfache 3-Spalten-Layout auf Twitter Bootstrap basiert. Das einzige Problem ist, dass jede Säule aus Blöcken mit unterschiedlichen Höhen zusammengesetzt wird.

<div class="container"> 
    <div id="blocks" class="row"> 
     <div class="span4"> 
      <div class="block" id="block1"> 
      <div class="block" id="block4"> 
      <div class="block" id="block7"> 
     </div> 
     <div class="span4"> 
      <div class="block" id="block2"> 
      <div class="block" id="block5"> 
      <div class="block" id="block8"> 
     </div>    
     <div class="span4"> 
      <div class="block" id="block3"> 
      <div class="block" id="block5"> 
      <div class="block" id="block9"> 
     </div> 
    </div> 
</div> 

.

Es funktioniert ganz gut, außer für kleine Displays. Dann ist die Reihenfolge der Blöcke nicht sortiert.

Gibt es irgendeine Art und Weise ohne JavaScript sortierten Blöcke zu erreichen?

Answer 1

Es gibt keine Möglichkeit, diesen Effekt mit der 3-Säulen-Struktur zu erreichen. Wenn die Blöcke alle die gleiche Höhe hätten, könnten Sie schweben: Lassen Sie alle Blöcke ohne die Spalten, dann würden sie in der Reihenfolge umbrechen.

http://masonry.desandro.com/

Answer 2

Seine gonna ziemlich schwierig, dies zu erreichen, könnten wollen Sie mit einziger Liste mit Schwimmer zu spielen, um: Da sie nicht die gleiche Größe haben würden Sie ein JavaScript-wie Mauerwerk verwenden, um nach links; oder Anzeige: Inline-Block;

oder

können Sie 2 Satz Liste haben mit @media in der CSS, so hängen von der Bildschirmgröße können Sie den ausgewählten div

css Beispiel

@media screen and (min-width: 768px) and (max-width: 1024px) { 
.displayFullScreen {display: block;} 
.displayMobileScreen {display: none;} 
} 


@media screen and (max-width: 767px) { 
.displayFullScreen {display: none;} 
.displayMobileScreen {display: block;} 
}