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

Question

这张照片比问题更能说明问题.如何在没有间隙的情况下使网格紧密.如果有的话,我只需要一个CSS解决方案.如果可能的话,我宁愿不改变html.有一个在这里设置的演示,如果你想尝试一些想法.必须允许可变高度,因此我们无法将所有元素设置为相同的高度.有任何想法吗？

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; }