жидкие divs с CSS

Question

Недавно я столкнулся с этим сайтом, http://www.zergnet.com/, и мне очень интересно узнать, как у них есть divs все рядом друг с другом, даже когда каждый из них имеет разную высоту. Я пробовал этот код только для создания некоторых random divs с разной высотой, но все они оставляли над ними пустое пространство. Как я могу исправить это, чтобы у них было всего 5 пикселей от вершины ?. Как я могу исправить этот код, чтобы получить тот же эффект, что и на веб-сайте?

<?php 
    for($x = 10; $x > 0; $x--){ 
    $rand = rand(200, 300); 
    echo '<div 
      style=" 
      margin: 0 5px 10px 5px; 
      width:200px; height:'.$rand.'px; 
      background-color:red; 
      width: 260px; 
      float: left;"> 
<img src="https://www.google.com/images/srpr/logo4w.png" width="260" height="'.$rand.'"></div>';}?> 

Answer 1

Заканчивать этот JQuery плагин называется masonry Это даст тот же формат, как вы перечислены и другие интересные из них

Для CSS можно создать 3 колонки, а затем внутри каждого родительского DIV создать ребенок div. Как это

<div> 
    <a href="#">Whatever stuff you want to put in here.</a> 
    <a href="#">Whatever stuff you want to put in here.</a> 
    <a href="#">Whatever stuff you want to put in here.</a> 
    ...and so on and so forth ad nauseum. 
</div> 

CSS

div { 
    -moz-column-count: 3; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px; 
    column-count: 3; 
    column-gap: 10px; 
    width: 480px; 
} 

div a { 
    display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */ 
    margin-bottom: 20px; 
    width: 100%; 
} 

пример:http://jsfiddle.net/9x3NX/

Answer 2

Вы можете получить этот макет с HTML и CSS.

Проверить DEMO http://jsfiddle.net/yeyene/wxVfj/1/

Ваш HTML будет ...

HTML

<div id="container"> 
    <div class="item_wrapper"> 
     <div class="item">...</div> 
     <div class="item">...</div> 
    </div> 
    <div class="item_wrapper"> 
     <div class="item">...</div> 
     <div class="item">...</div> 
     <div class="item">...</div> 
     <div class="item">...</div> 
    </div> 
    <div class="item_wrapper"> 
     <div class="item">...</div> 
     <div class="item">...</div> 
    </div> 
</div> 

CSS

html, body { 
    margin:0; 
    padding:0; 
    font-size:12px; 
} 
#container { 
    float:left; 
    width:630px; 
    background:green; 
} 
#container .item_wrapper { 
    float:left; 
    width:200px; 
    margin:0 5px; 
} 
#container .item { 
    width:100%; 
    background:#ccc; 
    margin:5px 0; 
}