微信小程序解决多切图缝隙(多个图片排列有缝隙)
用于解决IOS系统,小程序显示多张图片时出现缝隙的问题(强迫症,不改不行☺)。
今天给小程序的文章详情页中添加多个切图,发现在Andriod和PC的小程序端显示都没问题,IOS系统上显示出现了白色缝隙。如下图所示:
解决方案一 :flex布局
<div style="display: flex; flex-direction: column;">
<image src="" style="width:100%;"></image>
<image src="" style="width:100% ;"></image>
<image src="" style="width:100%;"></image>
<image src="" style="width:100%;"> </image>
<image src ="" style="width:100%;"></image>
</ div >
采用flex布局,布局方向:列。
解决方案二:给image设置一个margin-top,为负值
图片{
margin-top:-10px
}