使用CSS在<div>容器中按特定顺序排列3个<img>标签

嘿，作为前端新手，在容器里排图片确实是入门时容易卡壳的点～我给你分享几个简单好用的方法，直接改CSS就能搞定：

这是现在前端布局的主流方案，能轻松控制排列方向、对齐方式和间距：

先保留你的HTML结构：

<div class='container'>
  <img id="img1" src='https://i.pinimg.com/originals/28/3c/b3/283cb30bbe0b896cfd7bcd8748438504.jpg'>
  <img id="img2" src="https://imagesvc.timeincapp.com/v3/fan/image?url=https%3A%2F%2Fkingjamesgospel.com%2Fwp-content%2Fuploads%2Fusat-images%2F2016%2F04%2F9876462-nba-orlando-magic-at-miami-heat.jpeg">
  <img id="img3" src="你的第三个图片地址">
</div>

然后添加CSS：

.container {
  display: flex;
  /* 横向排列（默认就是row，可省略） */
  flex-direction: row;
  /* 图片之间的间距，比margin好用 */
  gap: 10px;
  /* 容器宽度不够时自动换行 */
  flex-wrap: wrap;
  /* 水平方向居中对齐，可选，也可以用flex-start/space-between等 */
  justify-content: center;
  /* 垂直方向居中对齐，可选 */
  align-items: center;
}

.container img {
  /* 控制图片宽度，比如占容器的30%，剩下的用gap填充 */
  width: 30%;
  /* 保持图片比例，不会拉伸变形 */
  object-fit: cover;
  /* 可选：给图片加圆角、阴影美化 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

如果想让图片排成严格的3列，每列宽度一致，Grid是绝佳选择：

CSS代码：

.container {
  display: grid;
  /* 分成3等宽的列 */
  grid-template-columns: repeat(3, 1fr);
  /* 行列之间的间距 */
  gap: 10px;
}

.container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

这里的1fr是“剩余空间等分单位”，3个1fr就把容器宽度分成3等份，非常省心。

这是Flexbox出现前的常用方法，需要处理元素间的空格问题，现在不推荐，但可以作为知识补充：

CSS代码：

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

.container img {
  display: inline-block;
  /* 每张小图占30%宽度，剩下的用margin做间距 */
  width: 30%;
  margin: 0 1.5%;
  object-fit: cover;
}

小提示 #

• object-fit: cover是个神器，能让图片在固定尺寸里保持比例，不会被拉伸变形；
• 如果想适配手机等小屏幕，可以用媒体查询调整图片宽度，比如在手机上改成width: 100%，让图片纵向排列。

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