【CSS】实现一排4个图片等间距布局

陌夏线

已于 2022-11-03 10:21:34 修改

阅读量5.1k

点赞数 4

分类专栏： # 法海前端笔记文章标签： css javascript 前端

于 2022-11-03 10:16:17 首次发布

本文链接：https://blog.csdn.net/dyyzht/article/details/127664627

版权

法海前端笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用纯margin-right属性实现图片等间距排列的方法，避免了使用flex布局。通过计算容器宽度和元素总宽度之间的差值来确定间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

非flex方法，纯margin-right实现，不废话直接上代码：

<view class="img-box">
    <image mode="aspectFill" class="img" src="图片地址"></image>
    <image mode="aspectFill" class="img" src="图片地址"></image>
    <image mode="aspectFill" class="img" src="图片地址"></image>
    <image mode="aspectFill" class="img" src="图片地址"></image>
    <image mode="aspectFill" class="img" src="图片地址"></image>
</view>

.img-box .img {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 20rpx;
}

.img-box .img:not(:nth-child(4n)) {
  /*最主要就是这句话，计算出三个间距大小，平分即可*/
  margin-right: calc((100% - 640rpx) / 3);
}

效果图：