微信小程序 - 横向靠右显示

【 微信程序 】 专栏收录该内容
9 篇文章 0 订阅

需求:

标题在左边,点击图标在右边

代码:

wxml代码

  <view class='flex-wrp-row item'>
    <view class='item-left flex-wrp-row'>
      <image src='../../image/ic_xxx.png' class='icon-left' mode='aspectFit'></image>
      <text class='text'>左边</text>
    </view>
    <view class='item-right flex-wrp-row'>
      <text class='text'>右边</text>
      <image src='../../image/ic_right.png' class='icon-right' mode='aspectFit'></image>
    </view>
  </view>

wxss代码:

/* 水平显示 */

.flex-wrp-row {
  display: flex;
  flex-direction: row;
}

.item {
  padding: 20rpx;
  position: relative;
}

.item-left {
   flex: 1; /* 重要 */
   align-items:center;
}

.item-right {
  position: relative;
  align-items:center;
}


 

ฅ՞•ﻌ•՞ฅ ~ 厚着脸皮要个赞赏哈 ~ ฅ՞•ﻌ•՞ฅ

 

  • 11
    点赞
  • 2
    评论
  • 15
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值