如何垂直对齐动态大小的div？

Question

我有一系列div，其高度将根据其中的内容动态生成。现在我可以使用float: left水平对齐它们，但是一旦div进入下一行，div之间就会出现没有匹配高度的空白区域。这就是我想要完成的事情：

哦，我正在寻找一个纯CSS解决方案。我目前正在进行的项目过时，我不能在其上使用任何新的框架。

Answer 1

您能否请更具体或上传代码。如果你想要一个网格布局，那就选择Bootstrap。它是响应式和网格布局的最佳框架！

Answer 2

原帖不能使用Bootstrap，但万一你可以

这可能是一个愚蠢的答案，但您可以在Foundation或Bootstrap等框架中使用列。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div style="height: 300px; border: 1px solid red;"></div>
            <div style="height: 300px; border: 1px solid red;"></div>
            <div style="height: 600px; border: 1px solid red;"></div>
        </div>
        <div class="col-md-4">
            <div style="height: 300px; border: 1px solid red;"></div>
            <div style="height: 600px; border: 1px solid red;"></div>
            <div style="height: 300px; border: 1px solid red;"></div>
        </div>
        <div class="col-md-4">
            <div style="height: 600px; border: 1px solid red;"></div>
            <div style="height: 300px; border: 1px solid red;"></div>
            <div style="height: 300px; border: 1px solid red;"></div>
        </div>
    </div>
</div>

你的小提琴：

http://jsfiddle.net/sg2787ft/