如果div的内容是动态的，如何给它们提供相同的高度

Question

基本上，我正在寻找一种方法来制作一组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

Answer 1

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

此插件可以帮助您： http://brm.io/jquery-match-height/

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

这是基本用法：

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

Answer 2

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

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

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

Answer 3

您可以使用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>

Answer 4

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

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

• 在你的div上使用最新的flexbox CSS（显示：flex - 你需要查看规格），但这是最终答案！

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