CSS不同高度的div元素导致网格间距

Question

这张图片用问题描述的比我能用语言描述的要好。我怎样才能使网格紧密没有任何间隙。如果有的话，我需要一个 CSS only 解决方案。如果可能的话，我宁愿不更改 html。如果您想尝试一些想法，可以使用demo set up here。 可变高度也必须允许，因此我们不能将所有元素设置为相同的高度。有什么想法吗？

DEMO

Answer 1

您也可以通过交替浮动来做到这一点。我更改了一些 box css，添加 box-sizing 并删除了 inline-block

http://jsfiddle.net/x666E/

.box{background-color:white;
  border:1px solid black;
  margin: 0;
  width:50%;
  display:block;
  float:left;
  box-sizing: border-box;
}
.box:nth-child(2n + 0) { float: right; }