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

本文介绍了CSS导致网格间距的不同高度div元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这张照片比问题更能描述问题。我怎样才能让网格没有任何缝隙。如果有的话，我需要一个 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元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！