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


Posted in Javascript onApril 23, 2020

图片右边加两行文字

先来一个效果图:

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

下面来看代码

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、使用表格布局

到此这篇关于微信小程序图片右边加两行文字的代码的文章就介绍到这了,更多相关微信小程序文字在图片右边内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
使用javascript创建快捷方式的简单实例
Aug 09 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 #Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 #Javascript
JS eval代码快速解密实例解析
Apr 23 #Javascript
浅谈vue权限管理实现及流程
Apr 23 #Javascript
js实现简单的贪吃蛇游戏
Apr 23 #Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 #Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 #Javascript
You might like
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
Python ZipFile模块详解
2013/11/01 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
Python面向对象类的继承实例详解
2018/06/27 Python
python dict 相同key 合并value的实例
2019/01/21 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python实现制度转换(货币,温度,长度)
2019/07/14 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python中reload重载实例用法
2020/12/15 Python
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
某公司面试题
2012/03/05 面试题
环保专项行动方案
2014/05/12 职场文书
学生评语集锦
2015/01/04 职场文书
逃课检讨书范文
2015/05/06 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
Go使用协程交替打印字符
2021/04/29 Golang
MySQL创建高性能索引的全步骤
2021/05/02 MySQL