开发小程序内容页面排版时,每次都会遇到图片自己有一定的间距,这是由于图片是行内元素的原因,自带的margin。很多程序员喜欢用负边距解决这个问题,但遇到图片之间有文字的时候,负间距就会导致图片遮盖文字的情况出现,很不友好!,那么有没有更好的办法?

【已解决】微信小程序多张图片之间有间距怎么办?-Qui-Note

也有的人喜欢用font-size:0解决,但是父级设置这个属性之后,里面的文字大小也是0,就不显示文字了,所以这也不是完美的解决方案!

当然有,而且还不仅仅有一种,以下是七娃整理的方法,都能完美的解决图片之间间距的BUG!

方案一:image图片变为块级元素

image{
  width: 100%;     
  display: block;
}

方案二:image图片浮动布局

.父元素{
  height: auto;
  overflow: hidden;
}
image{
  width: 100%;     
  float: left;
}

方案三:设置图片行内对齐方式——顶端对齐

image{width: 100%;     
   vertical-align: top;
}

方案四:父级弹性布局flex

.父元素{
  display: flex;
  flex-direction: column;
} 

以上就是我解决微信小程序中图片之间有间距的常用方案了,兼容性高,遇到bug的情况少,如果你还有什么好的方法,也可以告诉我,终于写完了!