html - 带有 CSS 的流体 div

Question

最近我偶然发现了这个网站，http://www.zergnet.com/，我真的很想知道他们接下来是如何拥有 divs 的即使每个人都有不同的高度，也会相互影响。我尝试这段代码只是为了生成一些具有不同高度的随机 divs，但它们都会在它们上方留下空白空间。我怎样才能解决这个问题，使他们距离顶部只有 5px？如何修复此代码以获得与网站中相同的效果？

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

您可以使用 HTML 和 CSS 获得此布局。

查看演示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;
}