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

陌夏线

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

阅读量4.4k

点赞数 3

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

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

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

版权

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

10 篇文章 0 订阅

订阅专栏

非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);
}

效果图：