如何在三张并排图片下方添加文字并保持三图同行布局

方法1：使用Flexbox布局 #

这是最简洁可靠的方案，通过父容器设置弹性布局，让包含图片和文字的子容器自动排列，还能轻松适配响应式场景。

HTML结构 #

<div class="image-row">
  <div class="image-item">
    <img src="你的图片地址1" alt="图片描述1">
    <p>图片下方文字1</p>
  </div>
  <div class="image-item">
    <img src="你的图片地址2" alt="图片描述2">
    <p>图片下方文字2</p>
  </div>
  <div class="image-item">
    <img src="你的图片地址3" alt="图片描述3">
    <p>图片下方文字3</p>
  </div>
</div>

CSS样式 #

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

.image-item {
  flex: 1; /* 让每个图片组平分父容器宽度，也可设固定比例如flex: 0 0 30% */
  text-align: center; /* 文字居中对齐 */
}

.image-item img {
  width: 100%; /* 图片自适应容器宽度 */
  height: auto; /* 保持图片原始比例 */
}

方法2：使用Grid布局 #

适合需要精确控制列数的场景，比如固定三列均分宽度：

HTML结构 #

与Flexbox方案的.image-row、.image-item结构完全一致

CSS样式 #

.image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三等分列宽 */
  gap: 16px; /* 列与列之间的间距 */
}

.image-item {
  text-align: center;
}

.image-item img {
  width: 100%;
  height: auto;
}

方法3：使用Inline-block（兼容旧环境方案） #

如果需要兼容不支持flex/grid的旧浏览器，可采用inline-block，但需处理元素间的空格问题：

HTML结构 #

<div class="image-row">
  <div class="image-item">
    <img src="你的图片地址1" alt="图片描述1">
    <p>图片下方文字1</p>
  </div><!--
  --><div class="image-item">
    <img src="你的图片地址2" alt="图片描述2">
    <p>图片下方文字2</p>
  </div><!--
  --><div class="image-item">
    <img src="你的图片地址3" alt="图片描述3">
    <p>图片下方文字3</p>
  </div>
</div>

CSS样式 #

.image-row {
  font-size: 0; /* 消除inline-block元素间的默认空格 */
}

.image-item {
  display: inline-block;
  width: calc(33.333% - 10px); /* 计算宽度，减去左右间距 */
  margin: 0 5px; /* 图片组左右间距 */
  font-size: 16px; /* 恢复文字默认大小 */
  text-align: center;
}

.image-item img {
  width: 100%;
  height: auto;
}

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