如何垂直對齊與動態尺寸的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/