一组盒子的响应和相等的高度答案

【问题标题】：responsive and equal height for a set of boxes一组盒子的响应和相等的高度
【发布时间】：2013-10-30 22:20:46
【问题描述】：

一行中有三个框，每个框包含一张图片和一个标题。我可以使用height 属性使它们的高度相等。但是在响应式视图中，当盒子缩小时，由于固定高度，盒子会在标题后看起来有一个额外的空白（特别是当标题只填充一行而不是两行时）

我可以使用padding-bottom，但它不会给我的盒子一个相等的高度，因为有些有更长的标题并且会填充两行而不是一行，所以会有更多的高度。

在响应式视图中缩小时，给这些框提供相同高度的解决方案是什么，不会让我有额外的空白空间？

【问题讨论】：

【解决方案1】：

如果您使用 jquery，请将此代码添加到页面底部：

var max=0;
$('article').each( function (){
    if($(this).height()>max)
        max=$(this).height();
});
$('article').height(max);

【讨论】：

【解决方案2】：

为你的盒子使用溢出：隐藏和高度（包含元素的文本的父级）：

<div style="overflow:hidden;height:150px;">

【讨论】：

【解决方案3】：

为了解决这个问题，将height 属性更改为min-height，这会使您的框自动调整大小并添加padding-bottom 以根据需要增加底部空白。

【讨论】：

【解决方案4】：

你的这个问题是一个普遍的问题，只能通过 CSS 解决方案来解决，但你应该谨慎选择你需要的解决方案。

Chris Coyier 发表了一篇关于使用 4 种不同 CSS 方法的等高流体宽度项目的精彩文章，如果您不关心浏览器支持，我个人喜欢 FlexBox 方法。

玩得开心。

【讨论】：