九宫格图片怎样图片之间的距离相等划分
发布于 6 年前 作者 yanjiang 3598 次浏览 来自 问答

这是我代码。。。。,请问样式怎么写?

<view class=‘jiugongge_img’>

<block wx:for="{{say_info.urls}}"  wx:key="*this"   wx:for-index=“idx” wx:for-item=“da” >

<view class=“row” bindtap=‘tupianyulan’  data-current=’{{da}}’  data-urls=’{{say_info.urls}}’ >

<image src=’{{da}}’ catchtap=‘liulantu’  data-dantu=’{{da}}’  data-arr=’{{say_info.urls}}’   >image>view>

block>

view>


.jiugongge_img{

display: flex;

flex-flow: row wrap;

/* justify-content: space-between; */

}

.jiugongge_img  .row{

flex:0 0 32.3%;

margin-right: 8rpx;

}

.jiugongge_img  image{

width:100%;

height:100px;

}

5 回复

显示出来的和想象的不一样!你能在查查代码吗

你好,可以尝试使用flex布局

box-sizing: border-box; + padding 能实现

距离直接手动计算呗

<view class="container">
  <view class='box' wx:for="{{[1,2,3,4,5,6,7,8]}}"></view>
</view>
.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.box{
  width: 210rpx;
  height: 210rpx;
  background: pink;
  margin-left: 30rpx;
  margin-top: 30rpx;
}

<view class=‘imagesShow’>

    <block wx:for="{{tempFilePaths}}" wx:key="{{index}}">

        <image src="{{item}}" data-index="{{index}}" />

    </block>

</view>

.imagesShow{

    display: flex;

flex:direction:row;

    justify-content:space-around;

    padding-left:20rpx;

    margin:  0 auto;

}

.imagesShow image{

    width: 200rpx;

    height: 200rpx;

    margin-top:20rpx;

}

回到顶部