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

Answer 2

查看这个名为masonry的 jquery 插件它会提供与您列出的相同的布局以及其他很酷的布局

对于 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/