如何垂直对齐与动态尺寸的div？

Question

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

哦，我正在寻找一个纯CSS的解决方案。我目前正在进行的项目是陈旧的，我无法使用任何新的框架。

Answer 1

您可以请更具体或上传代码。如果你想要一个网格布局然后去Bootstrap。这是响应式和网格布局的最佳框架！

Answer 2

原贴不能使用引导程序，但为了以防万一，你可以

这可能是一个愚蠢的答案，但你可以只使用一个框架内列像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/