填充两个 DIV 元素之间的空白答案

【问题标题】：Fill empty space between two DIV elements填充两个 DIV 元素之间的空白
【发布时间】：2014-05-22 09:36:26
【问题描述】：

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

图片中几乎显示了我想要实现的目标。生成 DIV 元素的顺序已标记。这里的问题是在生成 1 、 2 、 3 之后 4 应该去地方箭头点。我什至不介意6个去那里，但这个地方应该被填满。

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

【问题讨论】：

+1 用于添加屏幕截图。
你能在这里给出你的工作链接还是css
这是使用浮动元素，这就是预期的结果。在现代浏览器上，它应该使用像这里这样的 CSS 列：jsfiddle.net/jalbertbowdenii/7Chkz
你能提供一个jsfiddle吗？
@HashirAzad yoursitename.web44.net/buruzu2014/…

标签： javascript php jquery html css

【解决方案1】：

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

jsFiddle

见CSS trick上的文章查看支持的浏览器：http://caniuse.com/#search=columns

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

【讨论】：

【解决方案2】：

将-webkit-column-count: 3; 添加到父节容器
将您的 div 类 span_2_of_6 更改为 span_1_of_1
将width:100%;margin-left:0 important; 添加到类.col

【讨论】：

添加溢出：隐藏；内部突破：避免列； -webkit-column-break-inside：避免；并且工作正常。谢谢。