CSS different height div elements causing grid spacing

问题

This picture describes by problem better than I can put it into words. How can I get the grid to be tight without any gaps. I need a CSS only solution if there is one. I would rather not change the html if at all possible. There is a demo set up here if you would like to try out some ideas. Variable heights must be allowed also so we can't set all the elements to the same height. Any Ideas?

DEMO

回答1:

You can also do this by alternating your floats. I changed some of the box css, adding box-sizing and removing the 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; }

来源：https://stackoverflow.com/questions/21489726/css-different-height-div-elements-causing-grid-spacing