填充两个DIV元素之间的空白区域

Question

对不起，我很难解释。 我正在使用来自http://www.responsivegridsystem.com/的响应式网格并使用3列样式。

我想要实现的目标几乎都在图像中显示出来。标记生成DIV元素的顺序。这里的问题是，在产生1,2,3之后，4应该转到位置箭头点。我甚至不介意去那里，但这个地方应该被填满。

使用数据库

生成Div元素

<div class="section group">
<div class='col span_2_of_6 classifyGroup' style="height:50px;">
    <h3 class='classifyHeading'>BEVERAGES</h3>
</div>
<div class='col span_2_of_6 classifyGroup' style="height:75px;">
    <h3 class='classifyHeading'>salads</h3>
</div>
<div class="section group">

我已将网站上传到here

Answer 1

您正在使用浮动元素，这不是为您期望的结果而设计的。 在现代浏览器中，您应该使用CSS multiple-columns，例如：

jsFiddle

参见有关CSS trick的文章 请参阅支持的浏览器：http://caniuse.com/#search=columns

要支持旧版浏览器IE8 / 9，您应该使用isotope jQuery插件：http://isotope.metafizzy.co/

Answer 2

1. 将-webkit-column-count: 3;添加到父节容器
2. 将div的班级span_2_of_6更改为span_1_of_1
3. 将width:100%;margin-left:0 important;添加到课程.col