没有合适的资源?快使用搜索试试~ 我知道了~
图片右边加两行文字 先来一个效果图: 下面来看代码 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
资源详情
资源评论
资源推荐
微信小程序图片右边加两行文字的代码微信小程序图片右边加两行文字的代码
图片右边加两行文字
先来一个效果图:
下面来看代码
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;
weixin_38674616
- 粉丝: 4
- 资源: 916
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 小程序用户隐私保护授权弹窗组件.zip
- 软件22-7吕博钧安全管理与用户管理数据库.docx
- 小程序库0123456.zip
- 小程序国际化方案 , The internationalizational (i18n) library for wechat miniprogram.zip
- Screenshot_20241130_222516.jpg
- 必看使用教程等4个文件.zip
- 2023-4-8-笔记-第一阶段-第2节-分支循环语句- 4.goto语句 5.本章完 -2024.11.30
- 小程序云开发管理系统.zip
- 2023-04-06-项目笔记 - 第三百三十三阶段 - 4.4.2.331全局变量的作用域-331 -2025.11.30
- 小程序中将html内容转化成wxml可以显示的内容,方便小程序中显示.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论10