如何使用CSS实现gallery图片自动左右交替对齐效果

完全可以实现，核心依赖CSS的:nth-child()结构伪类，无需JavaScript即可实现无限循环的左右交替对齐效果，具体实现方案如下：

1. 基础HTML结构 #

<div class="gallery">
  <div class="gallery-item">
    <img src="你的图片地址" alt="图集图片">
  </div>
  <div class="gallery-item">
    <img src="你的图片地址" alt="图集图片">
  </div>
  <!-- 后续新增的图集项会自动适配对齐规则，无需额外配置 -->
</div>

2. CSS实现方案 #

提供两种适配不同场景的实现方式：

方案一：Grid布局（推荐，现代浏览器兼容性好，可控性更高） #

/* 图集容器样式 */
.gallery {
  display: grid;
  gap: 24px; /* 控制上下图片的间距 */
  max-width: 1200px; /* 容器最大宽度可自行调整 */
  margin: 0 auto;
}

/* 图集项基础样式 */
.gallery-item {
  width: 48%; /* 控制图片占比，可自行调整 */
}

/* 奇数项左对齐 */
.gallery-item:nth-child(odd) {
  justify-self: start;
}

/* 偶数项右对齐 */
.gallery-item:nth-child(even) {
  justify-self: end;
}

/* 图片自适应样式，避免溢出 */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

方案二：Float布局（兼容IE等老旧浏览器） #

/* 图集容器样式 */
.gallery {
  overflow: hidden; /* 清除浮动塌陷 */
  max-width: 1200px;
  margin: 0 auto;
}

/* 图集项基础样式 */
.gallery-item {
  width: 48%;
  margin-bottom: 24px;
}

/* 奇数项左对齐 */
.gallery-item:nth-child(odd) {
  float: left;
  clear: both; /* 避免和上一行元素并排 */
}

/* 偶数项右对齐 */
.gallery-item:nth-child(even) {
  float: right;
  clear: both;
}

/* 图片自适应样式 */
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

规则说明 #

• :nth-child(odd)会自动匹配所有第1、3、5...奇数位置的图集项，:nth-child(even)会匹配所有第2、4、6...偶数位置的图集项，新增任意数量的图集都会自动循环适配对齐规则，无需额外代码。
• 可根据实际需求调整width、gap、margin等值修改图片尺寸和间距。

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