CSS：为兄弟姐妹的孩子增加相同的身高

Question

我遇到这种情况，有两个分开的卡片组件，两个标签的高度必须相同。

是否可以仅使用CSS？

<div class="card">
  <div class="card__head">
    <h4 class="heading4 c-white">
      Heading
    </h4>
  </div>
  <div class="card__body">
    <p class="paragraph">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis commodo mauris.
    </p>
  </div>
</div>

Answer 1

简单的纯CSS不能执行此操作。您必须将固定高度设置为不可行。最好的方法是matchHeight js并使用display:inline-block; and vertical-align:middle。

1）您使用内联块根据codepen应用div 结构和css 。请记住，两个标题都在不同的列中

    <div class="fa-title"><h4>heading 1</h4></div>
        <div class="fa-title"><h4>heading 2</h4></div>
<style>
.fa-title{text-align:center;}
.fa-title h4{display:inline-block; vertical-align:middle;}
.fa-title h4::before,
.fa-title h4::after{content:""; display:inline-block; vertical-align:middle; height:100%; white-space:nowrap;}
</style>

2）将js应用于该div以获取两个div的共同高度。

`$('.fa-title').mathcHeight();`

http://brm.io/jquery-match-height-demo/

https://codepen.io/edge0703/pen/iHJuA

Answer 2

您想要相同的高度方向，并且如果标题较大，则需要使用CSS隐藏溢出标题文本部分。

您可以将此CSS属性用于标题部分：

overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;