堆栈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