问题 根据具有更多内容的div动态更改多个div的高度[重复]

我加了一个 auto-height 对所有需要高度相等的元素进行分类。然后我写了一个小jQuery函数来计算哪个元素是最大的并将它们全部设置为该高度。

function thisHeight(){
    return $(this).height();
}
$('.group-section').each(function(){
    var height = Math.max.apply(Math, $(this).find('.auto-height').map(thisHeight));
    $(this).find('.auto-height').height(height);
});

这是一个 钢笔。

尝试像flexbox这样简单的东西： -

<div class="flex">
<article>
<p>blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
</p>
</article>
<article class="third">
<p>blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
</p>
</article>
</div>

CSS

    .flex {
    display: flex;
    flex-flow: row nowrap;
    width: 400px;
}
article{
  border:1px solid black;
  flex: 2 2 60%;
  width: 60%;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
}
article.third{
    flex: 1 1 30%;
    width: 32%;
}

所以，这里的问题似乎是内部元素或至少其中一些元素 float 左还是右。这很好，但需要清除浮动元素，否则它们将无法与其他元素正确交互。要解决您的问题，我建议将此公共类添加到您的css，并将其应用于容器：

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}