HTML/CSS实现两张图片并排显示且标题位于图片下方问题求助

修改后可直接使用的代码 #

HTML部分 #

<!-- 外层容器用来放两个并排的图片模块 -->
<div class="img-wrapper">
  <figure class="img-item" id="img-div1">
    <img id="image1" src="https://www.wearethemighty.com/app/uploads/legacy/assets.rbl.ms/17317425/origin.jpg" alt="萨达姆执政时期画像" style="width: 100%; background-size: cover;">
    <figcaption class="img-caption" id="img-caption1">
      萨达姆执政时期的代表画像
    </figcaption>
  </figure>
  <figure class="img-item" id="img-div2">
    <img id="image2" src="https://arc-anglerfish-arc2-prod-advancelocal.s3.amazonaws.com/public/MIE5YDG625EFNGPHMVLSL3JDKM.jpg" style="width: 100%; background-size: cover;">
    <figcaption class="img-caption" id="img-caption2">
      法庭上的萨达姆
    </figcaption>
  </figure>
</div>

CSS部分 #

/* 外层容器：实现两个图片模块并排 */
.img-wrapper {
  display: flex;
  gap: 20px; /* 两个图片模块之间的间距，可自行调整 */
  flex-wrap: wrap; /* 小屏幕自动换行 */
  justify-content: center; /* 整体水平居中 */
  padding: 10px;
}

/* 单个图片模块：纵向排列，图片在上说明在下 */
.img-item {
  background: white;
  padding: 5px;
  margin: 0;
  width: 45%; /* 两个模块各占不到一半宽度适配并排需求，可自行调整 */
  display: flex;
  flex-direction: column; /* 核心：纵向排列，让figcaption在图片下方 */
  align-items: center;
}

/* 图片样式 */
.img-item img {
  max-width: 100%;
  height: auto;
}

/* 图片说明样式 */
.img-caption {
  margin: 10px 0 5px 0;
  text-align: center;
  width: 100%;
}

/* 移动端适配 */
@media (max-width: 460px) {
  .img-item {
    width: 100%; /* 小屏幕两个模块占满宽度，上下排列 */
  }
  .img-caption {
    font-size: 1.4rem;
  }
}

核心修改说明 #

• 新增外层统一容器控制并排逻辑，避免拆分两个容器导致的布局错乱
• 将单个图片容器figure的布局改为纵向flex，直接实现图片在上、说明文字在下的效果，这是解决你当前问题的核心逻辑
• 修正了原代码的错误：移除了不存在的float: inline、align=flex等无效属性，修正了重复ID的问题（同一页面内id不能重复，将相同样式改为class控制）
• 优化了适配逻辑，小屏幕下图片会自动上下排列，兼容移动端

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