两列HTML元素不会紧密堆叠

Question

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

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

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

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

是小盒子的CSS。我不知道如何让他们堆叠。更紧密。如果需要更多详细信息，请告诉我们！

编辑：HEere是JS Fiddle

http://jsfiddle.net/hkLXZ/

Answer 1

这需要以下两点之一：

1. 使用CSS列（例如.your-element { column-count: 3; }），在这种情况下，您的列不会从左到右堆叠，而是从上到下堆叠。
2. 使用像Masonry或Isotope这样的JS布局引擎，它可以更好地控制元素的布局，但需要使用JavaScript。