Question

我正在制作卡片。该卡有两个堆叠的div。卡的顶部具有图像，而底部仅是文本。如何确保顶部和底部div具有相同的高度？我知道我可以以像素为单位定义div的高度，但是我不想这样做，因为我不知道其他卡片上会有多少文字。

.card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.cardTop, .cardBottom {
  border: 1px solid;
}

img {
  display: block;
}

<div class="card">
  <div class="cardTop">
    <img src="https://placehold.it/200x100" alt="">
  </div>
  <div class="cardBottom">
    <p>text of the card goes here</p>
  </div>
</div>

Answer 1

只需使用flex-box的样式，如下所示：

.card {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;

  padding: 5px;
  height: 15em; //chose what you want
  width: 15em;  //chose what you want
}

.card > div {
  flex: 1 1 50%;
  overflow: hidden;
}

通过执行此操作，您的2个div将在您的.card全局容器高度的50％处分裂。

我在网上做了一个简单的例子：https://stackblitz.com/edit/angular-pechib

如何使两个堆叠的div具有相同的高度

1 个答案: