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

Question

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

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

Div元素使用Database生成

<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">

我已将网站上传到这里

Answer 1

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

的jsfiddle

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

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

Answer 2

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