如何让div列更紧凑？

Question

My CodePen ：http://codepen.io/leongaban/pen/wzumq

嗨，今天我有6列布局（每行3列）。第三列非常长，几乎就像一个侧栏。

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

问题是，由于我目前所有东西都浮在水面上，所以长列3在第1列和第1列的底部之间创建了太多空间。 2和4列的顶部和4 5。

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

有一种简单的方法吗？或者我是否必须将第4列放在1下面的另一列中，第5列和第2列也是如此？那么当屏幕尺寸改变时，使用jQuery来重新定位div？

当前问题：

---

我想要的是什么：

Answer 1

您有几个选项，而this article可以很好地解释它们。

1. 在所有浏览器上执行此功能的Javascript / jQuery插件（like jQuery masonry）
2. CSS-only选项使用CSS列（在文章中解释），充分了解IE9不支持这一点并谨慎使用！

这就像获得你想要的砖石布局一样。

Answer 2

看看这个：

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

希望这会有所帮助：）

Answer 3

我看到这样做的唯一方法是包装col1-col4，col2-col5，col3-col6并使包装器向左浮动。
然后，如果你想根据屏幕的分辨率使其响应，你可以使用@media queries和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;}

在这里你可以找到your codepen updated
在这里，您可以了解有关respond.js and css media queries

的更多信息