Question

我的网站目前看起来像这样（http://i.stack.imgur.com/TnHqt.png），正如您在底部看到的那样，div之间存在巨大的空间。

我怎样才能让它看起来像这样？（http://i.stack.imgur.com/yWRy7.png）？

    .contentExsternalHolder {
position: relative;
border: 1px solid #d4d4d4;
margin-left: 10px;
float: right;
background: #fff;
width: 250px;
margin-bottom: 16px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
box-shadow: 0 1px 2px rgba(0,0,0,0.07);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.displayContent {
/* margin: 0 auto; */
width: 90%;
}

一些html和php代码：

<div class="displayContent"><?
    foreach ($loadcontent->result() as $object) {?>
        <div class="contentExsternalHolder">
            <div class="contentHeader"><? echo ucfirst($object->title);?>
                <? if(isset($_SESSION['userid'])) { ?>
                <span class="delete exit" id="<?echo $object->id?>">[X]</span>
                <span class="edit" id="<?echo $object->id?>">[R]</span>
                <? }?>
            </div>
            <div class="contentViewHolder">
                <?echo $object->content?>
            </div>

            <div class="contentViewBottom">Av:    <?echo ucfirst($object->author)?>  <span class="contentViewTime"><?echo gmdate('d.m.Y H:i',$object->time + 60*60 )?></span></div>
        </div>
   <?
    }

?>

    </div>

Answer 1

如果你对jquery开放，这样的话？ http://jsfiddle.net/swm53ran/113/

<div class="container">
    <div class="col-xs-4 first">
        <div class="section">
            SECTION 1: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
    </div> <!-- first -->
    <div class="col-xs-4 second">
        <div class="section">
            SECTION 2: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
        </div>
    </div> <!-- second -->
    <div class="col-xs-4 third">
        <div class="section">
            SECTION 3: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
        </div>
    </div> <!-- third -->
</div> <!-- container -->

<div class="toBePlaced col-xs-4">
    <div class="section">
        SECTION 4: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
    </div>
    <div class="section">
        SECTION 5: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
    </div>
    <div class="section">
        SECTION 6: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. 
    </div>
    <div class="section">
        SECTION 7: I have content here. I have content here. I have content here. I have content here. I have content here. I have content here. I have content here.
    </div>
</div>

$(document).ready(function() {
    var first = $('.first');
    var second = $('.second');
    var third = $('.third');

    $('.toBePlaced > .section').each(function () {
        var height = $(this).height();
        var lowest = first;
        if (first.height() < lowest.height()) { lowest = first; }
        if (second.height() < lowest.height()) { lowest = second; }
        if (third.height() < lowest.height()) { lowest = third; }

        $(this).appendTo(lowest);
    });
});

Answer 2

我使用masonry，一种用于这种布局的javascript网格布局库。

这是链接，希望它有所帮助：http://masonry.desandro.com/

让div接近其他孩子

2 个答案: