Html 当div的内容是动态的时，如何使其具有相同的高度

基本上，我正在寻找一种方法，使一组4个div具有相同的高度。div的内容是动态的，因此有时扩展内容会强制其中一个div垂直扩展，从而使集合中每个div的高度不一致。下面的例子可以很好地解释这一点：

HTML

<div class="answers">
  <div class="a-b">
    <a href="#" class="answer" id="A">Michael Jackson</a>
        <a href="#" class="answer" id="B">Stevie Wonder</a>
    </div>
    <div class="c-d">
        <a href="#" class="answer" id="C">Lionel Richie</a>
        <a href="#" class="answer" id="D">This answer could contain more text</a>
    </div>
</div>

我如何保持2x2布局并强制每个div保持相同高度（由文本量最大的div指定）

---

您可以使用

线夹

*{
框大小：边框框；
}
.答案{
利润上限：35px；
字号：0；
}
.答复{
显示：内联块；
垂直对齐：顶部；
宽度：48%；
边界半径：32px；
文字装饰：无；
背景色：#1797FF；
颜色：白色；
填充：10px 33px；
字体大小：22px；
线高：24px；
利润率：0.1%20px；
最小高度：70px；
}
.答案跨度{
显示：-网络工具包盒；
-webkit线夹：2个；
-网络工具包盒方向：垂直；
溢出：隐藏；
}
.使用溢出{
显示：内联块；
垂直对齐：顶部；
宽度：48%；
边界半径：32px；
文字装饰：无；
背景色：#1797FF；
颜色：白色；
填充：10px 33px；
字体大小：22px；
线高：24px；
利润率：0.1%20px；
}
.使用溢出范围{
显示：块；
线高：24px；
高度：48px；
溢出：隐藏；
}

使用溢出

Flex box有很多很酷的功能，但现在我更喜欢jquery解决方案，因为它更兼容旧浏览器

此插件可以帮助您：

可以为所有图元或单行设置相同的高度

这是基本用法：

$(function() {
    $('.answer').matchHeight(options);
});

---

在花了太多时间之后，我放弃了CSS，使用了jQuery解决方案：

var maxHeight = Math.max.apply(null, $(".answer").map(function() {
    return $(this).height();
}).get());

$(".answer").attr('style', 'height: ' + maxHeight + 'px');

---

这是一个长期存在的问题：

只有两种方法可以始终如一地工作

• 在您的div上使用最新的flexbox CSS（display:flex-您需要查找规范），但这是最终的答案

• 如果您需要支持IE小于11，那么遗憾的是，唯一简单的可用选项是使用表示表（这是可行的，但不推荐使用）-否则您将被迫使用javascript在初始加载后调整div的高度

---

似乎在Chrome中运行良好，但遗憾的是它的跨浏览器支持较差：是的，但这是最好的主意，如果您正在寻找任何其他选项，请使用

高度
+
行高度
+
溢出
谢谢，但第二个选项是指定静态高度。有时答案可能都是一行，因此它们都需要“收缩”。此外，我不想使用
溢出：隐藏
，因为这可能会切断更长的答案。最小高度：70px不会让答案div收缩到两行文字以下。也许，灵活的方框多边形填充是两个世界中最好的？看见我没有试过这些，所以不能说它们有多好。如果有其他polyfills安装了Modernizer，使用css解决方案和回退可以是干净的。在我看来，只有javascript解决方案是可以接受的，特别是如果项目中没有使用Modernizer解决其他问题。为了方便起见，这是小提琴。我更喜欢使用matcheight.js插件，因为在调整窗口大小时，它已经可以处理响应问题了。@docta_faustus你看到我的答案了吗？仅使用CSS这实际上是一个注释，而不是答案。
var maxHeight = Math.max.apply(null, $(".answer").map(function() {
    return $(this).height();
}).get());

$(".answer").attr('style', 'height: ' + maxHeight + 'px');