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" >
阿强爱分享
  • 本文由 发表于 2020年7月17日09:48:51
  • 转载请务必保留本文链接:https://iooqp.cn/947.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: