堆叠具有不同宽度和高度的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