CSS导致网格间距的不同高度div元素 [英] CSS different height div elements causing grid spacing

问题描述

这张照片比问题更能描述问题。我怎样才能让网格没有任何缝隙。如果有的话，我需要一个 CSS唯一解决方案。如果可能，我宁愿不更改html。如果您想尝试一些想法，请在这里设置

  .box {background-color：white; 
 border：1px纯黑色; 
保证金：0; 
宽度：50％; 
 display：block; 
 float：left; 
 box-sizing：border-box; 
} 
 .box：nth-​​child（2n + 0）{float：right; } 
  

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

解决方案

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

这篇关于CSS导致网格间距的不同高度div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！