浮动div可变高度 [英] Floating divs with variable height

问题描述

我有一个div的变量高度的列表，它需要浮动在彼此旁边。问题是注释4应该放在注释2之上。但是当然它不能这样做，因为注释3正在占据它的位置。

I have a list of divs with a variable height that which needs to be float'ed next to each other. The problem is the comment 4 should be placed above comment 2. But of course it can't do that because the comment 3 is taking its place.

这是不可能的在css中没有改变标记太多？评论是动态添加的，所以它不总是5评论。我做了一个jsfiddle显示问题 http://jsfiddle.net/Kv2Qf/ - 我目前是这：

Is this somehow doable in css with out changing the markup too much? The comments are added dynamically so its not always 5 comments. I made a jsfiddle showing the problem http://jsfiddle.net/Kv2Qf/ - What I have currently is this:

<div id="CommentsContainer">
    <div class="Comment">
        <div class="CommentContent" style="height: 250px;">
            Comment 1
        </div>
    </div>

    <div class="Comment">
        <div class="CommentContent" style="height: 100px;">
            Comment 2
        </div>
    </div>

    <div class="Comment">
        <div class="CommentContent" style="height: 200px;">
            Comment 3
        </div>
    </div>

    <div class="Comment">
        <div class="CommentContent" style="height: 250px;">
            Comment 4
        </div>
    </div>
</div>

使用样式：

#CommentsContainer
{
    width: 783px;
    height: 500px;
    background-color: #f2f2f2;
}

.Comment
{
    width: 229px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    border: 1px solid #aaaaaa;
    background-color: #fffec7;
}

结果：

预期结果：

Expected Result:

推荐答案

第四个框：

<div class="Comment" style="margin-top:-90px;">
    <div class="CommentContent" style="height: 250px;">
        Comment 4
    </div>
</div>

适用于IE和Firefox，从未在其他浏览器中测试。

Works in IE and Firefox, never tested in other browsers.

这篇关于浮动div可变高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！