仅使用css调整多个div的高度（响应式设计）

Question

我有一个响应式设计的博客。在这篇博客的文章页面中，我在每篇文章的末尾都有一个“相关帖子”div。

这些div的高度有时会根据内容而改变，然后会破坏布局。希望以下图像能更清楚地解释问题：

我能够通过将每行div包装在父容器中来解决问题，但是这种解决方案并不合适，因为根据窗口的分辨率，有不同数量的相关帖子。

我知道有些人通过比较每个div的高度找到最高的一个来解决Javascript的问题，但我宁愿有一个纯粹的CSS解决方案。

有什么想法吗？

Answer 1

我知道你要求CSS解决方案，因为我无法评论，如果你想要一个jQuery解决方案，你可以使用masonary插件来满足你的需求。

Answer 2

您是否考虑过使用http://www.getbootstrap.com？这可以帮助您获得响应式布局，并且它是纯粹的CSS。希望这可以帮助你

Answer 3

这是一个“疯狂”的解决方案，但我过去曾经使用过它，我想要一个仅用于同一高度列的CSS解决方案。享受：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 4

可以找到Pure CSS Masonry Layout的一个很好的教程here。另外，您可以查看我的回答here。