css - 如何让 div 列浮得更紧？

Question

我的代码笔： http : //codepen.io/leongaban/pen/wzumq

嗨，所以今天我有一个 6 列布局（每行 3 列）。第三列真的很长，几乎就像一个侧栏。

根据设计，第 4 列和第 5 列需要靠近第 1 列和第 2 列的底部（比如说 10px 填充）。

问题是，因为我目前所有的东西都向左浮动，所以长的第 3 列在第 1 列和第 2 列的底部与第 4 列和第 5 列的顶部之间创建了太多空间。

我想保持 div 的位置不变，因为当在较小的浏览器窗口上时，我会有一些自适应代码来重新设置它们的样式。

是否有捷径可寻？或者我是否必须将第 4 列放在 1 下方的另一列中，而第 5 列和第 2 列也一样？那么当屏幕尺寸改变时使用jQuery重新定位div？

当前问题：

---

我想要做什么：

Answer 1

你有几个选择，这篇文章很好地解释了它们。

1. 在所有浏览器上执行此功能的Javascript/jQuery 插件（如 jQuery masonry ）
2. 使用 CSS 列的纯 CSS 选项（在文章中进行了解释），完全清楚 IE9 不支持此选项 - 并且小心翼翼！

就获得您想要的砖石布局而言，这几乎就是这样。

Answer 2

看看这个：

http://cssdeck.com/labs/css-only-pinterest-style-columns-layout

希望这可以帮助 ：）

Answer 3

我看到的唯一方法是包装 col1-col4、col2-col5、col3-col6 并使包装器向左浮动。
那么如果你想让它根据屏幕的分辨率做出响应，你可以使用@media 查询和respond.js。

这是您应该做什么的简要说明：

HTML

<div class="wrapper1">
<div class="col1">content here</div>
<div class="col4">content here</div>
</div>

<div class="wrapper2">
<div class="col2">content here</div>
<div class="col5">content here</div>
</div>

<div class="wrapper3">
<div class="col3">content here</div>
<div class="col6">content here</div>
</div>

CSS

.wrapper1, .wrapper2, .wrapper3{float:left;}

在这里你可以找到你的 codepen 更新
在这里你可以了解更多关于respond.js 和 css 媒体查询