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

最新推荐文章于 2024-11-25 14:28:52 发布

原创最新推荐文章于 2024-11-25 14:28:52 发布 · 1.2w 阅读

44 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #node.js

收录于

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

64 篇文章

订阅专栏

本文介绍了一种在图片右侧添加两行文字的布局方法，通过使用wxml和wxss代码实现，适用于微信小程序等前端开发场景。展示了如何通过flex布局调整图片与文字的位置，以及如何设置文字大小和颜色。

图片右边加两行文字

先来一个效果图：
在这里插入图片描述
下面来看代码
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
}