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

【问题标题】：Adjust height of multiple divs only with css (responsive design)仅使用 css 调整多个 div 的高度（响应式设计）
【发布时间】：2018-04-13 22:59:40
【问题描述】：

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

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

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

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

有什么想法吗？

【问题讨论】：

您可以只使用overflow-y: hidden; - 然后您可以截断每个主体，以确保它不会以丑陋的方式被切断。
如果您改变主意并使用 javascript，Masonry jquery 插件非常适合。
你可以使用一些东西作为'假列'codethatworks.blogspot.be/2012/05/…
重复：stackoverflow.com/questions/6378524/… -- CSS 不可能，除非你在它们上固定高度并溢出：隐藏
但是，在您的循环中，您可能能够明确：both br 就在计数之外，并在每个上放置一个类以根据媒体断点显示或隐藏。三个
后四个
在 6 个
之后隐藏和显示媒体查询。

标签： html css

【解决方案1】：

我知道您要求 CSS 解决方案，由于我无法发表评论，如果您想要一个 jQuery 解决方案，那么您可以使用 masonary 插件来满足您的需求。

【讨论】：

【解决方案2】：

您是否考虑过使用 http://www.getbootstrap.com ？这可以帮助您拥有响应式布局，而且它是纯 css。希望对你有帮助

【讨论】：

【解决方案3】：

这有点“狂野”的解决方案，但我过去曾使用过它，我希望为相同高度的列提供纯 CSS 解决方案。欣赏：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

【讨论】：

【解决方案4】：

可以在here 找到一个很好的纯 CSS 砌体布局教程。另外，您可以查看我的答案here。

【讨论】：