解决小程序 scroll-view 里面的image有间距、小程序里面的图片之间有空隙的问题。

1)小程序 image跟view标签上下会有间隙,解决方法如下:

在image那里设置vertical-align:top/bottom/text-top/text-bottom

原因:图片文字等inline元素默许是跟父级元素的baseline对齐,而baseline又和父级底边有必定间距

2)解决小程序里面的图片之间有空隙的问题

1、将图片转换为块级对象

  即,设置img为:

  display:block;

  在本例中添加一组CSS代码:

  #sub img {display:block;}

2、设置图片的垂直对齐方式

  即设置图片的vertical-align属性为“top,text-top,bottom,text-bottom”也可以解决。如本例中增加一组CSS代码:

  #sub img {vertical-align:top;}

3、设置父对象的文字大小为0px

  即,在#sub中添加一行:

  font-size:0;

  可以解决问题。但这也引发了新的问题,在父对象中的文字都无法显示。就算文字部分被子对象括起来,设置子对象文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

  如果父对象的宽、高固定,图片大小随父对象而定,那么可以设置:

  overflow:hidden;来解决。如本例中可以向#sub中添加以下代码:

  width:88px;height:31px;overflow:hidden;

5、设置图片的浮动属性

  即在本例中增加一行CSS代码:

  #sub img {float:left;}

  如果要实现图文混排,这种方法是很好的选择

6、取消图片标签和其父对象的最后一个结束标签之间的空格

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/22930.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

http1.0、http1.1 http 2.0

HTTP/1.0是无状态、无连接的应用层协议。 无连接 无连接:每次请求都要建立连接,需要使用 keep-alive 参数建立长连接、HTTP1.1默认长连接keep-alive   无法复用连接,每次发送请求都要进行TCP连接,TCP的连接释放都比较费事&…

【测试开发】测试用例的设计方法

目录 一. 测试用例的基本要素 二. 测试用例的设计方法 1. 测试用例设计的万能公式 水杯测试用例 2. 基于需求的设计方法 邮箱注册测试用例 3. 等价类方法 有效等价类和无效等价类 等价类思想设计测试用例步骤 4. 边界值方法 边界值思想设计测试用例步骤 5. 判定表方法…

120、仿真-51单片机温湿度光照强度C02 LCD1602 报警设计(Proteus仿真+程序+元器件清单等)

方案选择 单片机的选择 方案一:STM32系列单片机控制,该型号单片机为LQFP44封装,内部资源足够用于本次设计。STM32F103系列芯片最高工作频率可达72MHZ,在存储器的01等等待周期仿真时可达到1.25Mip/MHZ(Dhrystone2.1)。内部128k字节…

基于ChatGPT上线《你说我猜》小游戏

摘要 AIGC、GPT、休闲小游戏三者可以怎么结合? AIGC、GPT与小游戏的结合为游戏体验带来了新的可能性。AIGC(Artificial Intelligence Game Content)作为一种人工智能技术,可以自动生成任务、剧情和角色对话等游戏元素&#xff0c…

【嵌入式Qt开发入门】Qt如何网络编程——建立TCP通信服务端(附项目代码)

TCP 简介 TCP 协议(Transmission Control Protocol)全称是传输控制协议是一种面向连接的、可靠的、 基于字节流的传输层通信协议。 TCP 通信必须先建立 TCP 连接,通信端分为客户端和服务端。服务端通过监听某个端口来监听是否有客户端连接到来…

Java正则表达式MatchResult的接口、Pattern类、Matcher类

Java正则表达式MatchResult的接口 java.util.regex.MatchResult接口表示匹配操作的结果。 此接口包含用于确定与正则表达式匹配的结果的查询方法。可以看到匹配边界,组和组边界,但不能通过MatchResult进行修改。 接口声明 以下是java.util.regex.Matc…

Flask结合gunicorn和nginx反向代理的生产环境部署及踩坑记录

个人博客:https://xzajyjs.cn 前言 之前自己写的flask使用gunicorn上线生产环境没有什么问题,但是最近搭建了一个现成的flask项目,当使用python直接运行时不会有问题,而使用gunicorn时则会出现一些问题。 部署过程 运行测试 这…

XUbuntu22.04之解决蓝牙鼠标不停掉线问题(追凶过程)(一百八十五)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…

JDY-31 蓝牙传输模块的使用、调试和传输

JDY-31 蓝牙基于蓝牙 3.0 SPP 设计,这样可以支持 Windows、Linux、android 数据透传, 工作频段 2.4GHZ,调制方式 GFSK,最大发射功率 8db,最大发射距离 30 米,支持用户通过 AT 命令修改设备名、波特率等指令…

2023年Mac上有哪些优质的工具(一)

Downie 4 专门用来下载视频的,各大视频网站上的视频只要粘贴地址就可以直接下载,并且可以选择清晰度,再也不用受百度云的气了,下载速度非常快,让工作效率大大提高。 Xmind 大家熟知的一款思维导图软件,他…

亚马逊云科技,加速生成式AI的落地

编辑:阿冒 设计:沐由 “展望今天的世界,在机遇之外,更多事后我们看到的是前所未有的巨大挑战。事实证明,惟有通过创新、专注创新,方能挖掘和发现更多的增长机会。” 在2023亚马逊云科技中国峰会的第二天&am…

Mysql 数据库开发及企业级应用

文章目录 1、Mysql 数据库开发及企业级应用1.1、为什么要使用数据库1.1.1、数据库概念(Database)1.1.2、为什么需要数据库 1.2、程序员为什么要学习数据库1.3、数据库的选择1.3.1、主流数据库简介1.3.2、使用 MySQL 的优势1.3.3、版本选择 1.4、Windows …