当它们的内容是动态的时如何给 div 相同的高度答案

【问题标题】：How to give divs the same height when their content is dynamic当它们的内容是动态的时如何给 div 相同的高度
【发布时间】：2023-03-07 14:54:01
【问题描述】：

基本上，我正在寻找一种使一组 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>

CSS

.answers {
    margin-top: 35px;
}
.a-b {
    width: 50%;
    float: left;
}
.c-d {
    width: 50%;
    float: right;
}
.answer {
    display: inline-block;
    border-radius: 32px;
    text-decoration: none;
    background-color: #1797FF;
    color: white;
    padding: 10px 33px;
    font-size: 22px;
    width: 75%;
    margin-bottom: 20px;
}

如何保持 2x2 布局并强制每个 div 具有相同的高度（由具有最多文本的 div 决定）？

JSfiddle Link

【问题讨论】：

标签： html css

【解决方案1】：

你可以使用line clamp

*{
  box-sizing: border-box;
}

.answers {
  margin-top: 35px;
  font-size: 0;
}
.answer {
  display: inline-block;
  vertical-align: top;
  width: 48%;
  border-radius: 32px;
  text-decoration: none;
  background-color: #1797FF;
  color: white;
  padding: 10px 33px;
  font-size: 22px;
  line-height: 24px;
  margin: 0 1% 20px;
  min-height: 70px;
}
.answer span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.using-overflow {
  display: inline-block;
  vertical-align: top;
  width: 48%;
  border-radius: 32px;
  text-decoration: none;
  background-color: #1797FF;
  color: white;
  padding: 10px 33px;
  font-size: 22px;
  line-height: 24px;
  margin: 0 1% 20px;
}

.using-overflow span {
  display: block;
  line-height: 24px;
  height: 48px;
  overflow: hidden;
}

<div class="answers">
  <a href="#" class="answer"><span>Michael Jackson Michael Jackson Michael Jackson Michael Jackson </span></a>
  <a href="#" class="answer"><span>Stevie Wonder</span></a>
  <a href="#" class="answer"><span>Lionel Richie</span></a>
  <a href="#" class="answer"><span>This answer could contain more text This answer could contain more text</span></a>
</div>

<h1>using overflow</h1>
<div class="answers">
  <a href="#" class="using-overflow"><span>Michael Jackson Michael Jackson Michael Jackson Michael Jackson</span></a>
  <a href="#" class="using-overflow"><span>Stevie Wonder</span></a>
  <a href="#" class="using-overflow"><span>Lionel Richie</span></a>
  <a href="#" class="using-overflow"><span>This answer could contain more text This answer could contain more text</span></a>
</div>

【讨论】：

似乎在 Chrome 中运行良好，但遗憾的是它对跨浏览器的支持很差：caniuse.com/#search=line-clamp
是的，但这是最好的主意，如果您正在寻找其他选项，请使用 height + line-height + overflow
谢谢，但第二个选项是指定静态高度。有时答案可能都是一行，所以他们都需要“缩小”。另外，我不想使用overflow: hidden，因为这可能会切断更长的答案。
min-height: 70px 不会让答案 div 缩小到 2 行文本以下。

【解决方案2】：

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

这个插件可以帮助你： http://brm.io/jquery-match-height/

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

这是基本用法：

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

【讨论】：

也许，Flexible Box polyfill 是两全其美的？见github.com/Modernizr/Modernizr/wiki/…。我没有尝试过任何这些，所以不能说它们的效果如何。
如果为其他 polyfills 安装了 Modernizr，使用带有后备的 css 解决方案可以是干净的。在我看来，仅 JavaScript 解决方案也是可以接受的，特别是如果项目中没有使用 Modernizr 来解决其他问题。

【解决方案3】：

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

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

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

【讨论】：

在简洁地完成工作方面，我喜欢这个答案。为了方便起见，这里是小提琴。 jsfiddle.net/h53ag4p7/26
我更喜欢使用 matcheight.js 插件，因为在调整窗口大小时已经可以管理响应问题。
@docta_faustus 你看到我的答案了吗？仅使用 CSS

【解决方案4】：

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

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

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

【讨论】：

这真的是评论，不是答案。