微信小程序(移动端)开发时多img拼接底部留白解决方法

1.给图片的包裹元素加属性

font-size: 0;

2.给图片包裹元素加属性

position: relative;                                                                        //用弹性盒子让图片垂直排列

display: flex;

flex-direction: column;

 

3.给图片本身加属性

1）vertical-align:top;  或者  vertical-align:bottom;                         //垂直对齐方式

2）margin-top: -10rpx;     (先不建议这种方法哈，不够科学)               //负margin值

 

 

代码示例(微信小程序)：

wxml代码

 

<view class='big_tu'>

<image src='http://www.doujiew.com/bdjwtest/img/cms/bg_summeractivity_01.png' style='width:100%;'></image>

<image src='http://www.doujiew.com/bdjwtest/img/cms/bg_summeractivity_02.png' style='width:100%;'></image>

<image src='http://www.doujiew.com/bdjwtest/img/cms/bg_summeractivity_03.png' style='width:100%;'></image>

<image src='http://www.doujiew.com/bdjwtest/img/cms/bg_summeractivity_04.png' style='width:100%;'></image>

</view>

 

wxss代码

.big_tu{

width: 100%;

margin-bottom: 120rpx;

/* position: relative;

display: flex;

flex-direction: column; */

}

 

.big_tu image{

background: lightblue;

/* margin-top: -10rpx; */

aligvertican:top;

}