这是wxml部分:
<view class="medicine-all">
<view class="medicine-item{{item}}" wx:for="{{medicine}}" wx:key="id">
<image src="{{item.image}}" class="medicine-image">{{item.name}}</image>
<text class="medicine-name">{{item.name}}</text>
</view>
</view>
这是js部分:
medicine:[{
id:1,
name:'龙葵',
},
{
id:2,
name:'甘草',
},
{
id:3,
name:'菊花',
}
]
这是wxss部分:
.medicine-all{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap
}
.medicine-image{
width: 350rpx;
height: 350rpx;
}
这是目前效果:
我想让图片在上文字在下成为一个单位,这个单位再进行弹性布局,可是目前效果是这样的,请问该如何做才能达成我想要的效果?
图片默认是 display: inline-block的。你换为 display:block就好了。。
是这个效果么?
https://developers.weixin.qq.com/s/gOoqKKmd7vfj