JavaScript微信小程序图片右边加两行文字的代码

微信小程序图片右边加两行文字的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

图片右边加两行文字

先来一个效果图:

图片1

下面来看代码

wxml

<view class="view_tupian_wenzi">

<image class="image_1" src="https://www.wpmee.com/../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

}

ps:下面接着看下如何实现图片和两行文字在一行显示

给你个例子- -

html

<div class="wrap">
<img src="https://www.wpmee.com/images/ico.png" >
CTRL+D快速收藏,欢迎常来喔

未经允许不得转载:作者: Aqiang, 转载或复制请以 超链接形式 并注明出处 阿强爱分享
原文地址: 《JavaScript微信小程序图片右边加两行文字的代码》 发布于2020年7月17日

本文链接:JavaScript微信小程序图片右边加两行文字的代码 - https://iooqp.cn/post-947.html

本文标签:

相关推荐
发表评论
0 评论
还没有评论,快来抢沙发吧!