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

填充两个DIV元素之间的空白区域 I am sorry that I am so bad at explanation. I am using responsive grid from http://www.responsivegridsystem.com/ and using 3 column style.

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

What I want to achieve is pretty much shown in the image. The order by which DIV elements are generated is labeled. The problem here is that after 1 , 2 , 3 are generated 4 should go to the place arrows point. I dont mind even 6 going there, but the place should be filled.

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

Div elements are generated using Database

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

I have uploaded the site to here

我已将网站上传到这里

2 个解决方案

#1

add -webkit-column-count: 3; to parent section container

add -webkit-column-count:3;到父节容器

change you div's class span_2_of_6 to span_1_of_1

将div的类span_2_of_6更改为span_1_of_1

add width:100%;margin-left:0 important; to class .col

添加宽度:100%; margin-left:0重要;上课.col

#2

You are using floating elements, that's not designed for result you are expecting. On modern browsers, you should use CSS multiple-columns like here:

您正在使用浮动元素,这不是为您期望的结果而设计的。在现代浏览器中,您应该使用CSS多列,如下所示:

jsFiddle

See article on CSS trick See supported browsers: http://caniuse.com/#search=columns

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

To support older browsers as IE8/9, you should use isotope jQuery plugin: http://isotope.metafizzy.co/

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

#1

add -webkit-column-count: 3; to parent section container