添加figcaption后figure内元素垂直堆叠，如何实现水平排列？

你当前的代码存在两个核心问题：

• 把所有图片和标题塞进同一个<figure>标签里，不符合语义规范（一个<figure>应当对应一组媒体+说明文本）
• <figcaption>是块级元素，默认会占满整行，自然导致元素上下堆叠

正确实现步骤： #

1. 调整HTML结构：给每一组「图片+标题」单独套一个<figure>，形成独立的内容单元
2. 用CSS让单元水平排列：推荐用Flexbox方案，简单易维护且兼容性好

完整代码示例 #

HTML

<div class="image-group">
  <figure>
    <img src="imgsrc1.png" alt="图片1">
    <figcaption>图片1标题</figcaption>
  </figure>
  <figure>
    <img src="imgsrc2.png" alt="图片2">
    <figcaption>图片2标题</figcaption>
  </figure>
  <figure>
    <img src="imgsrc3.png" alt="图片3">
    <figcaption>图片3标题</figcaption>
  </figure>
</div>

CSS（Flexbox方案，推荐）

.image-group {
  display: flex;
  gap: 24px; /* 控制每组图片之间的间距，可按需调整 */
  flex-wrap: wrap; /* 屏幕宽度不足时自动换行，可选 */
}

.image-group figure {
  margin: 0; /* 清除浏览器默认的figure外边距 */
  text-align: center; /* 让标题居中显示在图片下方 */
}

.image-group img {
  max-width: 200px; /* 限制图片最大宽度，可按需调整 */
  height: auto; /* 保持图片比例 */
}

备选方案（Inline-block，兼容老浏览器）

如果需要适配更旧的浏览器环境，可以使用这个写法：

.image-group {
  font-size: 0; /* 消除inline-block元素间的空白间隙 */
}

.image-group figure {
  display: inline-block;
  margin-right: 24px; /* 控制间距 */
  font-size: 16px; /* 恢复正常字体大小，避免标题消失 */
  text-align: center;
}

.image-group img {
  max-width: 200px;
  height: auto;
}

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