这是我代码。。。。,请问样式怎么写?
<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;
}
你好,可以尝试使用flex布局
我用的就是flex布局,布局后感觉九宫格图片之间的距离不行等(上下左右),你能帮我看看么
你可以尝试一下这样写
.jiugongge_img {
display: flex;
align-items: space-around;
justify-content: center;
flex-wrap: wrap;
}
.jiugongge_img image {
margin: 10rpx 20rpx;
height: 200rpx;
width: 200rpx;
}
如果不够9张,比如4张、5,出现的行图片会居中,这个不符合,你能在看看吗
align-items: space-around ;
justify-
content
:
center
;
这两句写反了吧
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;
}
我试试