Css 可变高度浮动div

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

这在css中是否可行，而不需要对标记进行太多的更改？注释是动态添加的，因此它并不总是5条注释。我制作了一个JSFIDLE来说明这个问题-我现在看到的是：

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

结果:

预期结果：

---

您可以尝试为第四个框提供负边距顶部：

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

评论4

---

可在IE和Firefox中使用，从未在其他浏览器中测试过。

这可以做到：CSS解决方案将不再灵活。请参阅massy.jsor检查同位素：并检查同位素和砌体的区别：看起来这可能有一些解决方案，但不仅仅是CSS：@Dumpen您可以创建一个新的答案，并接受它。

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