html - 两列 HTML 元素没有紧密堆叠

Question

当屏幕足够大时，我的网络应用程序中有两列。

http://i.imgur.com/FL7lgjj.png

问题是左边的第一个元素和它下面的元素之间的空间困扰着我。

.thumnnail {
  display: inline-block;
  width: 400px;
  float: right;
}

是小盒子的 CSS。我不确定如何让它们堆叠。接近一点了。如果需要更多详细信息，请告诉我!

编辑:这里是 JS Fiddle

http://jsfiddle.net/hkLXZ/

Answer 1

这需要两个条件之一:

1. 使用 CSS 列(例如 .your-element { column-count: 3; })，在这种情况下，您的列不会从左到右堆叠，而是从上到下堆叠。
2. 使用 JS 布局引擎，如 Masonry或 Isotope ，它对元素的布局方式提供了更多控制，但需要 JavaScript。