css - 图像和信息 div 不会自动占据相同的高度

Question

我想在左边有一个图像，在右边有一些信息。右边的这个信息 div 周围有一个橙色边框。我希望这个信息区域占据图像的相同高度。所以我创建了一个带有 display flex 和 align-items stretch 的 div .details。但它不起作用，图像和信息区域不占用相同的宽度。你知道为什么吗？

示例:https://jsfiddle.net/wjvwovy2/

html:

<div class="container py-4">
  <div class="row">
    <div class="details">
      <div class="col-8 px-0" style="background-color: red">
        <img style="width: 100%" src="http://via.placeholder.com/700x350"/>
      </div>
      <div class="col-4 px-0">
        <div class="details-title d-flex flex-column align-items-start">
          <span class="font-size-sm font-weight-semi-bold">Date</span>
          <h1 class="h5 font-weight-bold">Title</h1>
          <span class="details-title-subtitle font-size-sm font-weight-bold">Subtitle</span>
          <a href="" class="btn btn-primary btn-block details-title-subtitle-subtitle">Subtitle2</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是因为您已将视觉样式应用于不是 .details 的直接子代的后代中元素。有多种方法可以解决此问题，具体取决于您要实现的目标。

一个快速的方法是申请 d-flex在 <div class="col-4 px-0"> 中上课和 flex-grow: 1在 <div class="details-title d-flex flex-column align-items-start"> .

https://jsfiddle.net/todorito/32ukpemr/1/