九宫格图片怎样图片之间的距离相等划分

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API 和组件 小程序 Bug view image Android 6.6.5 2.1.1


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

<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;

}




最后一次编辑于  07-11  (未经腾讯允许,不得转载)
收藏 0评论 0
关注问题写回答

5 个回答

  • nicknamenickname

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

    赞同 1没有帮助
    4评论
    复制
    07-11
    • 浪淘沙浪淘沙

      我用的就是flex布局,布局后感觉九宫格图片之间的距离不行等(上下左右),你能帮我看看么

      赞同 0没有帮助回复复制07-11
    • nicknamenickname
      回复浪淘沙

      你可以尝试一下这样写

      .jiugongge_img {

      display: flex;

      align-items: space-around;

      justify-content: center;

      flex-wrap: wrap;

      }

      .jiugongge_img image {

      margin: 10rpx 20rpx;

      height: 200rpx;

      width: 200rpx;

      }


      赞同 0没有帮助回复复制07-11
    • 浪淘沙浪淘沙
      回复nickname

      如果不够9张,比如4张、5,出现的行图片会居中,这个不符合,你能在看看吗

      赞同 0没有帮助回复复制07-11
    • 展示更多
    评论
  • PPLLPPLL

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


    赞同 0没有帮助
    1评论
    复制
    07-13
    评论
  • 远山远山

    距离直接手动计算呗

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



    赞同 0没有帮助
    1评论
    复制
    07-12
    评论
  • 浪淘沙浪淘沙

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

    赞同 0没有帮助
    0评论
    复制
    07-11
  • 小隐小隐

    <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;

    }




    赞同 0没有帮助
    1评论
    复制
    07-11
    评论