时间戳

首页 > 解决方案 > 在 figcaption 绝对位置中，字幕尾随图像下方

html - 在 figcaption 绝对位置中，字幕尾随图像下方

问题描述

我正在尝试在图像的底部放置一个标题，它正在使用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 的尾部垂在图像边缘下方。

标签： htmlcsspositionfigure

解决方案

制作图像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>

推荐阅读