微信小程序图片右边加两行文字

最新推荐文章于 2023-04-26 12:01:25 发布

wy313622821

最新推荐文章于 2023-04-26 12:01:25 发布

阅读量1.1w

点赞数 7

分类专栏：微信小程序文章标签：前端 javascript node.js

本文链接：https://blog.csdn.net/wy313622821/article/details/105653536

版权

微信小程序专栏收录该内容

64 篇文章 70 订阅

订阅专栏

图片右边加两行文字

先来一个效果图：
在这里插入图片描述
下面来看代码
wxml

<view class="view_tupian_wenzi">
      <image class="image_1" src="../images/main_yewu.png" />
      <view class="view_wenzi2">
        <text>服务项目</text>
        <text class="text_small">进入服务项目，查看项目数据</text>
      </view>
    </view>

wxss代码

.view_tupian_wenzi {
  display: flex;
  flex-direction: row;
  margin-left: 10px
}
.image_1 {
  width: 50px;
  height: 50px;
}
.view_wenzi2 {
  width: 90px;
  margin-left: 5px;
  display: flex;
  flex-direction: column;
}
.text_small{
   font-size: 27rpx;
   word-break:break-all;
   color: #7a7878
}