响应和一组盒子的相同高度

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

使用overflow：您的盒子的隐藏和高度（包含元素的文本的父级）：

<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/

玩得开心。