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

图片右边加两行文字

先来一个效果图:
在这里插入图片描述
下面来看代码
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
}
发布了26 篇原创文章 · 获赞 24 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/wy313622821/article/details/105653536