在figcaption位置绝对的图像下方尾随字幕尾部[重复]答案

【问题标题】：Caption tails trailing below image in figcaption position absolute [duplicate]在figcaption位置绝对的图像下方尾随字幕尾部[重复]
【发布时间】：2019-10-15 12:24:17
【问题描述】：

我正在尝试使用 position absolute 和 bottom 0 在图像底部放置标题，但 g 和 y 字母区域的尾部悬垂在图像边缘下方。这是预期的行为吗？我只需要稍微调整一下标题的位置吗？

代码如下：

.article-image,
figure {
  margin: 1.5em 0;
}

figure {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  position: relative;
}

figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, .6);
}

cite {
  font-size: 0.85em;
}

<figure>
  <img class="aside-image" src="images/grayson-perry.jpg">
  <figcaption>I've moved out just as Walthamstow is becoming gentrified. My work is done.</figcaption>
</figure>
<cite>- Graysen Perry</cite>

我不希望 g 和 y 的尾部垂在图像边缘以下。

【问题讨论】：

如果没有 actual 图像，这很难检测到，但我的猜测是您需要将图像设置为 display:block。
哦...他们被称为“后代”而不是尾巴。 ☺

标签： html css position figure

【解决方案1】：

制作图片display:block，如果您不希望文字从图片右侧流出，请制作图片inline-block

.article-image,
figure {
  margin: 1.5em 0;
}

figure {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  position: relative;
  display:inline-block;
}

figcaption {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, .6);
}

cite {
  display:block;
  font-size: 0.85em;
}

.aside-image {
  display:block;
}

<figure>
  <img class="aside-image" src="https://www.fillmurray.com/300/300">
  <figcaption>I've moved out just as Walthamstow is becoming gentrified. My work is done.</figcaption>
</figure>
<cite>- Graysen Perry</cite>

【讨论】：