具有不同高度单元格的自适应网格布局

Question

我有一个像这样生成的单元格的网格：

 <style>   
.calWrapper{
 width:200px;
 float:left;
}
</style>
<div class="container">
<?php for($i=1; $i<=12; $i++){
            echo "<div class='calWrapper'><h3 id='cal-$i-label'></h3>";
            echo "<div class='calendar' id='cal-$i'>Loading...</div>";
            echo "</div>";
    }?>

页面加载后，会发出一堆 AJAX 请求来填充 .calendar div，其中充满了日历！他们把自己放在一个漂亮的网格中，根据它的宽度有不同数量的列。然而，当每个月的高度不同时，我最终会陷入这种混乱：

我知道我可以用display: table、display:table-row 和display:table-cell 将它们排列成一个网格，但是因为每行的单元格数会根据视口的宽度而变化，因此没有明确定义的“行” .基本上，我需要this question 的答案，但不使用display:table-*。

我已经尝试明确设置 calWrapper div 的高度，但是在小月份它会留下大量的空白，而在大月份它与该月显示的事件使日历任意生成的事实无法相比大。

Answer 1

一开始我打算推荐 Bootstrap，但我不确定你对你的网站架构有多远，所以改为使用 Bootstrap 的基本原理class="row"，而不是使用display:table 使用display:inline-block 那这样您仍然可以获得所需的动态高度并避免此包装问题。

我将定义您每行将拥有的日历数量（在本例中为 4 个），并使用 class="row" 对该行进行分类并给它这个 css。

.row {
    width:100%;
    display: inline-block;
    margin:20px auto;
    clear:both;
 }

见DEMO