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

原创已于 2022-11-03 10:21:34 修改 · 5.4k 阅读

20 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #javascript #前端

收录于

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

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

10 篇文章

订阅专栏

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

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

效果图：