如何使用CSS实现3张图片水平并排对齐显示

架构老林

2026-8-26

3张图片水平并排布局问题修复

现有代码核心错误

标签不符合HTML规范：不存在<figures>这个标准标签，你需要给每一组「图片+对应图注」单独套一个<figure>标签，否则CSS中写的.features figure选择器完全匹配不到目标元素，布局规则自然不生效。
图片属性拼写错误：图片路径属性是src，你写的scr是无效拼写，会导致图片加载失败。
标签未正确闭合：所有<figcaption>标签都缺少闭合的斜杠，正确闭合格式为</figcaption>，未闭合标签会触发浏览器的怪异渲染模式，打乱布局结构。
Flex布局作用层级错误：你把flex属性挂在了.features容器上，但错误的标签结构导致需要并排的内容不是该容器的直接子元素，flex的横向排列规则无法传递到目标内容上。

可直接运行的正确代码

HTML部分

<section class="features">
  <figure>
    <img src="....jpg" alt="...">
    <figcaption>...</figcaption>
  </figure>
  <figure>
    <img src="...jpg" alt="...">
    <figcaption>...</figcaption>
  </figure>
  <figure>
    <img src="...jpg" alt="...">
    <figcaption>...</figcaption>
  </figure>
</section>

CSS部分

.features{
    background: white;
    color: burlywood;
    padding: 28px;
    display: flex;
    flex-direction: row;
    gap: 16px; /* 控制三个图片模块之间的间距，可按需调整数值 */
    flex-wrap: wrap; /* 小屏幕宽度不足时自动换行，避免内容溢出 */
}

.features figure{
    margin: auto;
    width: 200px;
    text-align: center;
    text-transform: uppercase;
}

.features figure img{
    border-radius: 100px;
    width: 200px;
    height: 200px; /* 固定图片高度，和宽度配合做正圆形头像效果 */
    object-fit: cover; /* 裁剪图片适配尺寸，避免拉伸变形 */
}