微信小程序图片右边加两行文字的代码_微信小程序多图两列布局 - CSDN文库

5星 · 超过95%的资源 19 浏览量更新于2023-03-03 评论收藏 38KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

图片右边加两行文字

先来一个效果图：

下面来看代码

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

}

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

给你个例子- –

html

<div class="wrap">

<img src="images/ico.png" alt="">

<span>Lorem ipsum dolor sit amet consectetur adipisicing.<br>Lorem ipsum dolor sit amet consectetur adipisicing.</span>

</div>

css

.wrap {

/* 可无需设置高度，靠图片高度或者文字的上下padding撑开高度 */

border: 1px solid;

width: 600px;

text-align: center;

}

.wrap span{

display: inline-block;

vertical-align: middle;

padding: 20px 0; /* 撑开高度 */

}

.wrap img{

width: 10px;

height: auto;

vertical-align: middle;

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论10

df595420469

2023-06-08

我发现这个代码也可以用于其他项目中，非常万能。

weixin_38674616

粉丝: 4
资源: 916

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈