jquery - 一组盒子的响应和相等的高度

Question

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

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

给这些盒子一个相等的高度的解决方案是什么，当在响应视图中缩小时不会让我有额外的空白空间？

Answer 1

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

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

Answer 2

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

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

编辑：http: //jsfiddle.net/G4PvQ/2/

Answer 3

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

Answer 4

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

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

文章：http ://css-tricks.com/fluid-width-equal-height-columns/
演示：http ://css-tricks.com/examples/FluidEqualHeightFauxColumns/

玩得开心。