javascript - div 之间的网格高度问题？

Question

我使用 float:left 方法用 HTML 和 CSS 创建了 div 网格系统。

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

这是代码笔: 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+支持)