Html 如何将div与动态大小垂直对齐？

我有一系列的div，其高度将根据其中的内容动态生成。现在我可以使用

float:left

将它们水平对齐，但是只要div进入下一行，div之间就有空白，没有匹配的高度。以下是我试图实现的目标：

---

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

你能说得更具体些或者上传代码吗。如果你想要一个网格布局，那么选择引导。它是响应速度和网格布局的最佳框架

原始帖子不能使用引导，但以防万一您可以使用

这可能是一个愚蠢的答案，但您可以在或之类的框架中使用列

还有你的小提琴：

---

啊，是的，如果我能使用像Bootstrap这样的现代框架，我会，但我不能：（兄弟，Bootstrap布局纯粹是css。你可以使用它们。只使用布局不需要Js。谢谢兄弟。我会调查一下的，同时让我给你一个简单的方法：）不能使用Bootstrap或任何现代框架：（寻找纯CSS解决方案。请注意，在fiddle中，我将列更改为.col-sm-4而不是.col-md-4——这只是因为fiddle中的窗口大小将列堆叠起来，就像它们在移动设备上一样。只需创建一个名为column third的类，宽度为33.333%（就像引导程序一样）你可以通过使用显示表元素来实现它，你可以通过显示表元素来实现它……你需要支持哪些浏览器？IE8 IE11、Chrome、FF、SaaFiel.Fund和Bootstrap需要IE 9 +…所以他们的框架不能被使用，尝试找到支持IE 8的框架。

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