div之间的网格高度问题？

Question

我使用float：left方法创建了带有HTML和CSS的div网格系统。

它工作正常，但是当同一行中两个div之间存在可变高度差时，下一个div从具有最大高度的div下方的最底部位置开始。

这是codepen： http://codepen.io/anon/pen/GJZWoX

CSS：

.parent{
  width:330px;
}

.red{
  float:left;
  width:150px;
  height:150px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:red;
}

.blue{
  float:left;
  width:150px;
  height:300px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:blue;
}

有没有办法只用css解决这个错误？任何好的答案将不胜感激。

这就是我要找的：

谢谢

Answer 1

只是CSS？使用flexbox，您可以http://demosthenes.info/blog/844/Easy-Masonry-Layout-With-Flexbox

但我会选择Javascript作为更强大的（在发布时稍微更好的浏览器支持）方法。

通过JQuery Masonry http://masonry.desandro.com/（从IE9 +支持）