レスポンスの不均一な高さ

Question

私は過去数日間、特定のウェブページデザインに取り組む方法について頭を落とそうとしていましたが、これまでのところエレガントなソリューションを考え出すことはできませんでした。

デザインを簡潔にまとめると、コンテナには高さが不揃い（動的に生成された）高さが同じ（液体）幅のコンテナが3列あります。彼らは左から右に向かって数字順に並ぶように配置する必要があります。上の行には1-2-3が続き、2番目の行には4-5-6が続きます。

今、ナットを本当にバストしているのは、コンテナ間に不必要な「垂直方向の間隔」がなくても、このラインをきれいにすることです。私が説明するために（コードブロック以下JSFiddleとしても利用可能）以下のモックアップコードを作成しました：

HTML

<div class="wrapper" id="wrapper"> 
    <div class="container small" id="container_1">1</div> 
    <div class="container large" id="container_2">2</div> 
    <div class="container small" id="container_3">3</div> 
    <div class="container medium" id="container_4">4</div> 
    <div class="container small" id="container_5">5</div> 
    <div class="container medium" id="container_6">6</div> 
    <div class="container large" id="container_7">7</div> 
    <div class="container medium" id="container_8">8</div> 
    <div class="container large" id="container_9">9</div> 
    <div class="clearfix"></div> 
</div> 

CSS

.wrapper { 
    width: 100%; 
    padding: 5%; 
} 
.clearfix { 
    clear: both; 
} 
.container { 
    display: block; 
    float: left; 
    width: 25%; 
    margin: 2.5%; 
    color: white; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.small { 
    height: 100px; 
    background: red; 
} 
.medium { 
    height: 150px; 
    background: green; 
} 
.large { 
    height: 200px; 
    background: blue; 
} 

JSFiddle ：http://jsfiddle.net/tzikas/MYgNx/

注：列レイアウト自体が最終的にはデバイス幅に基づいて1/2列に縮小しました。これをエミュレートするためにJSFiddleに単純な「Toggle layout」ボタンが含まれていました。私は 例ごとに、間の過度の垂直方向の間隔を取り除くにはどうすればよい

1. を、「1」と「5」または「2」と "：私は考え出す助けをしたいと思い何
   は

   次のようです6 "？

2. の位置を「3」よりも「1」より低くする（「 前のポイントも解決しています）」に「4」を取得するにはどうすればよいですか？

好ましく私は、スクリプトの任意の種類によってDOMを操作することなく、これを解決したいが、私がしなければならない場合、その後、MooToolsのは、私の「優先毒である。あなたの要件ごととして

Answer 1

。あなたは、このためにhttp://masonry.desandro.com/を使用することができます。