如何解决在 css 中自动左右对齐图像
我一直在处理一个页面,需要完成某种“画廊”。我必须交替对齐图像。例如:第一个图像左对齐,第二个图像右对齐,这应该会自动继续。你知道怎么做吗?(如果可能的话)
你好:)
解决方法
例如使用网格容器和 :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>
.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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。