如何仅用HTML和CSS（不使用Flex）实现图片并排对齐并加下方描述

以下两种方案均不使用Flex属性，可直接复用： #

方案1：inline-block实现（兼容性最优，无浮动塌陷问题） #

HTML结构 #

<!-- 第一行图片组 -->
<div class="image-row">
  <div class="image-card">
    <img src="替换为你的图片路径" alt="图片1">
    <p>图片1的文字说明</p>
  </div>
  <div class="image-card">
    <img src="替换为你的图片路径" alt="图片2">
    <p>图片2的文字说明</p>
  </div>
  <div class="image-card">
    <img src="替换为你的图片路径" alt="图片3">
    <p>图片3的文字说明</p>
  </div>
</div>
<!-- 第二行图片组 -->
<div class="image-row">
  <div class="image-card">
    <img src="替换为你的图片路径" alt="图片4">
    <p>图片4的文字说明</p>
  </div>
  <div class="image-card">
    <img src="替换为你的图片路径" alt="图片5">
    <p>图片5的文字说明</p>
  </div>
  <div class="image-card">
    <img src="替换为你的图片路径" alt="图片6">
    <p>图片6的文字说明</p>
  </div>
</div>

对应CSS代码 #

* {
  margin: 0;
  padding: 0;
  /* 关键属性：避免边框、内边距撑大容器宽度 */
  box-sizing: border-box;
}
.image-row {
  width: 100%;
  /* 消除inline-block默认的空格间隙 */
  font-size: 0;
  /* 两行图片组的垂直间距 */
  margin-bottom: 20px;
}
.image-card {
  display: inline-block;
  /* 每个卡片占31%宽度，左右各留1%边距，3个总占93% */
  width: 31%;
  margin: 0 1%;
  text-align: center;
  /* 恢复正常字体大小 */
  font-size: 16px;
  /* 卡片顶部对齐，避免高度不一致错位 */
  vertical-align: top;
}
.image-card img {
  width: 100%;
  height: auto;
  /* 图片和说明文字的间距 */
  margin-bottom: 8px;
}

方案2：float实现 #

HTML结构和方案1完全一致，仅替换CSS即可：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.image-row {
  width: 100%;
  margin-bottom: 20px;
}
/* 关键：清除浮动，避免父容器高度塌陷 */
.image-row::after {
  content: "";
  display: block;
  clear: both;
}
.image-card {
  float: left;
  width: 31%;
  margin: 0 1%;
  text-align: center;
}
.image-card img {
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}

常见布局异常原因 #

• 未设置box-sizing: border-box，导致内边距、边框撑大卡片宽度，3张卡片总宽度超出100%，最后一张被挤到下一行
• 使用float时未添加清除浮动的逻辑，导致行容器高度为0，下一行元素上顶堆叠
• 使用inline-block时未处理默认的文本空格间隙，总宽度超出容器限制

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