使用figcaption无法实现图片下方显示说明文字的问题求助

问题原因 #

你给<img>设置了position: absolute绝对定位属性，该属性会让元素脱离正常文档流，父级<figure>标签无法识别到绝对定位图片的高度，<figcaption>会按照无图片的正常排版逻辑显示，自然无法跟在图片下方。

修复方案 #

最优方案是把定位属性从<img>移到父级<figure>上，让整个图文容器一起偏移，这样<figcaption>就能正常跟随在图片下方，无需修改原有HTML代码，仅调整CSS即可：

/* 给父容器figure加定位，让图文整体偏移 */
figure {
  width: 600px;
  position: absolute;
  left: 600px;
  margin: 0; /* 可选，清除浏览器给figure设置的默认外边距 */
}
.image {
  width: 100%; /* 自适应父容器宽度，避免图片溢出 */
}

可选兜底方案 #

如果业务逻辑确实要求单独给图片设置绝对定位，可以给<figcaption>也添加对应的绝对定位，手动调整位置到图片下方，不过该方案适配性差，不推荐优先使用：

.image{
 width: 600px;
 position: absolute;
 left: 600px;
}
figcaption {
  position: absolute;
  left: 600px;
  top: 600px; /* 此处数值需要根据你的图片实际高度做调整 */
}

内容的提问来源于stack exchange，提问作者Youssef1781