如何用HTML实现多图自适应行列排布且每张图下方显示文字

云原生阿岚

2026-9-3

带说明文字的图片自适应行列排布实现方案

问题原因

直接在img标签后追加figcaption会破坏原有自适应排布，核心原因有两个：

figcaption默认是块级元素，渲染时会单独占据一整行
图片和对应的说明文字没有被绑定为独立的排布单元，浏览器会把所有img、figcaption当作独立的零散元素参与流式排版，无法实现「图+文作为一个整体」自动换行排列的效果。

实现代码

不需要改动原有排布逻辑，只需要给每组「图片+说明」加一层容器，配合极少量CSS即可完全保留「随窗口宽度自动换行、一行排列尽可能多单元」的特性，而且写法符合HTML语义化规范。

HTML部分

<figure class="img-unit">
  <img src="img1.png" alt="示例图1">
  <figcaption>第一张图的说明文字</figcaption>
</figure>
<figure class="img-unit">
  <img src="img2.png" alt="示例图2">
  <figcaption>第二张图的说明文字</figcaption>
</figure>
<!-- 后续新增图片按相同格式追加即可 -->

CSS部分

.img-unit {
  /* 核心属性：让图文组作为内联块参与排版，和纯img的排布逻辑完全一致 */
  display: inline-block;
  /* 以下为可选样式，可根据需求调整 */
  margin: 10px; /* 控制各个图文单元之间的间距 */
  text-align: center; /* 让说明文字在图片下方居中 */
}
.img-unit img {
  display: block;
  max-width: 100%; /* 避免图片尺寸过大溢出容器 */
  height: auto; /* 保持图片原始宽高比 */
}
.img-unit figcaption {
  margin-top: 6px; /* 控制图片和说明文字的间距 */
  font-size: 14px;
  color: #666;
}