div之间的网格高度问题？答案

【问题标题】：Grid Height Issue between divs?div之间的网格高度问题？
【发布时间】：2015-05-13 14:39:01
【问题描述】：

我使用 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 来解决这个错误？任何好的答案将不胜感激。

这就是我要找的：

谢谢

【问题讨论】：

我会阅读 Flexbox css-tricks.com/snippets/css/a-guide-to-flexbox
仅在 CSS 中执行此操作将使其成为一项非常艰巨的任务，但有一些出色的插件可以帮助您。也许你想要类似 masonry.js 的东西，这不是我的，但这里是一个很好的 example 的 masonry.js 工作原理。
不仅仅只有 CSS，只有 flexbox。看我的回答。 @Earthling

标签： javascript html css

【解决方案1】：

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

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

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

【讨论】：