1

最近、私はこのウェブサイトに出くわしました.それぞれの高さが異なる場合でも、それらがどのように隣り合っhttp://www.zergnet.com/ているかを知りたいと思っています.高さの異なるランダムを生成するためだけにこのコードを試しましたが、すべてそれらの上に空きスペースを残します。上から 5px だけになるようにするにはどうすればよいでしょうか。このコードを修正して、ウェブサイトと同じ効果を得るにはどうすればよいですか?divsdivs

    <?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>';}?>
4

2 に答える 2

0

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/

于 2013-07-02T01:40:25.653 に答える
0

このレイアウトは 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;
}
于 2013-07-02T02:01:39.383 に答える