在css中自动左右对齐图像

Posted 2023-03-05

【中文标题】在css中自动左右对齐图像

【英文标题】：align images left and right automatically in css

【发布时间】：2021-09-29 11:19:31

【问题描述】：

我一直在处理一个页面，并且需要完成某种“图库”。我必须交替对齐图像。例如：第一个图像左对齐，第二个图像右对齐，这应该会自动继续。您对如何做到这一点有任何想法吗？（如果可能的话）

你好 :)

【参考方案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>

【参考方案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>