将div与父

Question

我有一个div嵌套在另一个div中，我希望它位于父div的底部。我能够让这个工作，但有一个小问题。嵌套div中的文本扩展到父div之下。我怎么能阻止这个？注意：这不是图像下方的额外空间。 div的底部未与图像的底部对齐。

.imgOverlayTitle {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.imgOverlayDesc {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

<div style="position: relative; display: inline-block;">
    <div class="imgOverlayTitle">Title goes here</div>
    <div class="imgOverlayDesc">Description goes here</div>
    <img src="http://www.hillspet.com/HillsPetUS/v1/portal/en/us/cat-care/images/HP_PCC_md_0130_cat53.jpg" />
</div>

Answer 1

解决方案是将容器div设为flexbox。见下文。

.imgOverlayTitle {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.imgOverlayDesc {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

<div style="position: relative; display: flex;">
  <div class="imgOverlayTitle">Title goes here</div>
  <div class="imgOverlayDesc">Description goes here</div>
  <img src="http://www.hillspet.com/HillsPetUS/v1/portal/en/us/cat-care/images/HP_PCC_md_0130_cat53.jpg" />
</div>