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

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

图片右边加两行文字

先来一个效果图:

图片1

下面来看代码

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;

}

其实多行居中分很多情况的- -只有行内元素,只有行内替换元素,行内与行内替换混合,建议去好好看看vertical-align与基线相关资料。

就楼主这个需求,还有其他更容易的实现方式,比如:

1、flex弹性盒子(移动端)

2、使用表格布局

到此这篇关于微信小程序图片右边加两行文字的代码的文章就介绍到这了,希望大家以后多多支持!

暂无评论

发表评论

您的电子邮件地址不会被公开,必填项已用*标注。

相关推荐

网网站站长尾词怎么挖掘

首先,我们需要对行业有足够的了解,找出行业内用户的需求,并从用户需求中挖掘出长尾关键词。SEO优化师喜欢比喻,就像你想 ...

微信扫一扫,分享到朋友圈

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