css - 可变高度的 float div

Question

我有一个 div 列表，其高度可变，需要彼此相邻 float 。问题是评论 4 应该放在评论 2 之上。但是当然不能这样做，因为评论 3 正在取代它。

在不过多更改标记的情况下，这在 css 中是否可行？评论是动态添加的，所以它并不总是 5 条评论。我制作了一个显示问题的 jsfiddle http://jsfiddle.net/Kv2Qf/ - 我目前拥有的是:

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

结果:

预期结果:

Answer 1

你可以尝试给第四个盒子一个负的margin-top:

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

在 IE 和 Firefox 中工作，从未在其他浏览器中测试过。