html - 堆叠具有不同宽度和高度的html div？

Question

堆叠多个 div 而不在其间产生空间的最佳方法是什么？

我正在使用具有不同高度和宽度的 css float 来实现当前结果:

*{margin:0;padding:0;}

#main{
  background: blue;
  max-width:1000px;
  margin:0 auto;
  overflow:hidden;
  text-align:center;
}

div>div{
  background: green;
  width:33.33333%;
  float:left;
  border:1px solid grey;
  padding:5px;
  box-sizing:border-box;
  height:100%;

}

div>div>div{
  width:100%;
  background:yellow;
  height:100%;
}

http://codepen.io/vincentccw/pen/WvExKB

如您所见，结果并不是我真正想要实现的，中间的蓝色间距和水平线中断......

我想要做的是让所有的 div 自动排列它们并占据剩余的任何蓝色空间....

Answer 1

你可以看看 flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

也正如 Hashem 指出的那样，但随后是一个 css 解决方案:http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox