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

间距布局"/>

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

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

效果图：