小程序2个图片并排

本文介绍在微信小程序中通过flex布局实现两个图片并排显示的方法。父容器使用display:flex、justify-content:space-around,子图片设置width:45%并采用widthFix模式,即可自适应并排展示。

作者:zhuge··预计阅读 7 分钟·697 阅读·0 评论
小程序2个图片并排

wxml

<view class="img-box">

  <image src="/images/r1.pngmode="widthFix"></image>

  <image src="/images/r2.pngmode="widthFix"></image>

</view>

wss

.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content:space-around;
}
.img-box image{
   width: 45%;
}


相关文章

评论

加载中...