在 css 中自动左右对齐图像

Question

我一直在处理一个页面，有一些 gallery 需要完成。我必须交替对齐图像。例如：第一张图像左对齐，第二张图像右对齐，这应该会自动继续。你知道怎么做吗？（如果可能的话）

问候 :)

Answer 1

例如网格容器和 :nth-child(even) 或 :nth-child(odd)

.container {
  display: grid;
}
img:nth-child(even) { justify-self: left;}
img:nth-child(odd) { justify-self: right; }

<div class="container">
  <img src="https://picsum.photos/200/300" />
  <img src="https://picsum.photos/200/300" />
  <img src="https://picsum.photos/200/300" />
  <img src="https://picsum.photos/200/300" />
  <img src="https://picsum.photos/200/300" />
  <img src="https://picsum.photos/200/300" />
  <img src="https://picsum.photos/200/300" />
</div>

Answer 2

.image_float {
  width: 100%;
  overflow: hidden;
}
.image_float .img_div:nth-child(even){
  text-align: left;
}
.image_float .img_div:nth-child(odd){
  text-align: right;
}
.img_div{
 width: 100%;
 float: left;
} 
.image_float img{
  width: 40%;
  margin: 0px 0px 10px 0px;
}

<div class="image_float">
  <div class="img_div">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
  </div>
  <div class="img_div">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
  </div>
  <div class="img_div">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
  </div>
  <div class="img_div">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
  </div>
  <div class="img_div">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
  </div>
  <div class="img_div">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
  </div>
</div>

在 css 中自动左右对齐图像

align images left and right automatically in css

css

image

gallery

alignment