Jquery 一组箱子的响应性和同等高度

一行中有三个框，每个框包含一个图像和一个标题。 我可以使用

height

属性使它们的高度相等。但在响应视图中，当框因固定高度而收缩时，框将在标题后显示额外的空白（特别是当标题仅填充一行而不是两行时）

我可以使用

填充底部

，但它不会使我的框具有相同的高度，因为有些框的标题较长，会填充两行而不是一行，因此高度会更高

---

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

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

编辑：

---

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

编辑：

---

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

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

---

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

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

---

若要解决此问题，请使用

min height

更改

height

属性，使您的长方体自动调整大小，并添加

填充底部

以根据需要增加底部空白。

若要解决此问题，请使用

min height

更改

属性，使长方体自动调整大小并添加
填充底部
，以根据需要增加底部空白。
您的这个问题是一个无法解决的问题，只能通过CSS解决，但您应该谨慎选择所需的解决方案

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

文章：

演示：

玩得开心。
你的这个问题是一个无法解决的问题，只能用CSS解决，但是你应该谨慎地选择你需要的解决方案

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

文章：

演示：

玩得开心。
为你的问题做一把小提琴…为你的问题做一把小提琴…pesar khale使用高度+溢出隐藏；）这应该可以做到，因为你没有改变小提琴（看起来你没有保存你所做的）。我没有感觉到任何东西添加溢出：隐藏到框。对不起，我犯了一个错误。我编辑了答案，当然还有linkwell，要么文本必须很小，要么溢出应该被隐藏以使它们大小相同。如果您使用jquery，我可以给您更好的答案。让我们使用pesar khale使用高度+溢出隐藏；）这应该可以做到，因为你没有改变小提琴（看起来你没有保存你所做的）。我没有感觉到任何东西添加溢出：隐藏到框。对不起，我犯了一个错误。我编辑了答案，当然还有linkwell，要么文本必须很小，要么溢出应该被隐藏以使它们大小相同。如果你使用jquery，我可以给你更好的答案