高さの異なる3列レイアウト

Question

私はTwitterのブートストラップに基づいて単純な3列のレイアウトを持っています。唯一の問題は、各列が異なる高さのブロックから組み立てられていることです。

<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> 

。

小さなディスプレイを除いて、これはかなりうまく動作します。次に、ブロックの順序はソートされません。

任意のJavaScriptをせずにソートされたブロックを達成するためにいくつかの方法はありますか？

Answer 1

この効果を3列構造で実現する方法はありません。ブロックがすべて同じ高さだった場合は、浮動小数点数にすることができます。列のないブロックをすべて残してから、順番に折り返します。彼らは同じサイズではありませんので、あなたは石工としてのJavaScriptなどを使用しなければならないでしょう：

http://masonry.desandro.com/

Answer 2

そのつもりこれを達成するのは非常に困難なことは、あなたがしたいフロートを備えた単一のリストで遊ぶかもしれません：左;または表示：インラインブロック。

または

あなたは

CSSの例

@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;} 
}