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

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