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


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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 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
初学CAKEPHP 基础教程
2009/11/02 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
理解Javascript_10_对象模型
2010/10/16 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
JavaScript 绘制饼图的示例
2021/02/19 Javascript
python ip正则式
2009/05/07 Python
centos下更新Python版本的步骤
2013/02/12 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
python实现简单遗传算法
2020/09/18 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
应届生.NET方向面试题
2015/05/23 面试题
酷瑞网络科技面试题
2012/03/30 面试题
大学毕业登记表自我鉴定
2013/10/09 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
初一年级组工作总结
2015/08/12 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书