如何用HTML/CSS灵活排列图片集？解决末图右对齐问题

直接给你几个简单灵活的实现方式，完美适配数量可变的图片集：

方案1：Flexbox（推荐，兼容性好） #

这是最省心的方式，核心是不要用分散对齐的属性，直接让容器左对齐换行：

<!-- HTML结构 -->
<div class="image-gallery">
  <img src="你的图片地址" alt="图片描述">
  <img src="你的图片地址" alt="图片描述">
  <!-- 可添加任意数量的图片 -->
</div>

/* CSS样式 */
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 关键：强制所有图片左对齐 */
  gap: 15px; /* 图片间的间距，替换成你需要的数值 */
}

.image-gallery img {
  width: 200px; /* 固定宽度，也可用百分比如24% */
  height: auto; /* 保持图片比例 */
}

如果需要图片自适应容器宽度，把img的width换成flex: 0 0 calc(25% - 15px);（25%对应一行4张，减去gap宽度），这样会自动填充一行空间，最后一行数量不足时依然左对齐。

方案2：CSS Grid（更现代的布局） #

适合需要精细控制的场景，自动适配图片数量：

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动生成列，最小宽度200px */
  gap: 15px;
  justify-items: start; /* 确保图片左对齐，默认即为start，可省略 */
}

.image-gallery img {
  width: 100%; /* 占满网格单元 */
  height: auto;
}

你之前的问题原因 #

估计是用了justify-content: space-between或justify-content: space-around这类属性，它们会把容器剩余空间均匀分配到图片之间，导致最后一行图片被强制拉开到左右两端，换成flex-start（Flexbox）或Grid默认对齐方式即可解决。

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