照片均匀分布在容器

这种布局实现的效果是将一组图片以等间距的方式排列在一个网格中。每个图片项具有相同的宽度,并且它们之间有均匀的间距。图片项按照从左到右、从上到下的顺序进行排列,形成一个紧凑的网格布局。每行的图片数量通常是固定的,以便保持整齐的外观。同时,通过去除每行的最后一个图片项的右边距,确保最右侧的图片与容器的边距为0,使整个布局看起来更加对齐和整洁。这种布局适用于展示多张图片,并可用于实现产品展示、相册展示等场景。它可以在不同的屏幕尺寸和设备上自适应,并提供一致的显示效果。

<view class="ask-priceImg">
   <view class="item" wx:for="{{businessInfo.user_business_throw[0].delivery_price_file}}" 
wx:key="index">
     <image class="imgItem" src="{{item.fileUrl}}" mode="" />
   </view>
</view>
.ask-priceImg {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20rpx 0;
  /* border: 1px solid yellowgreen; */
}

.ask-priceImg .item {
  width: calc(33.33% - 10px);
  height: 180rpx;
  margin-bottom: 10px;
  margin-right: 10px;
}

.ask-priceImg .item:nth-child(3n) {
  margin-right: 0;
}

.ask-priceImg .imgItem {
  width: 100%;
  height: 100%;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值