HTML

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

查看这个名为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/

Answer 2

您可以使用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;
}

使用CSS的流体div

2 个答案:

HTML

CSS