小程序 image跟view标签上下会有间隙

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、取消图片标签和其父对象的最后一个结束标签之间的空格。



作者:尹莫一
链接:https://www.jianshu.com/p/dc590c9b2695
 


http://www.niftyadmin.cn/n/640963.html

相关文章

洛谷P4925 [1007]Scarlet的字符串不可能这么可爱(计数)

题意 题目链接 Sol 只要知道“回文连续子串”就能做了吧。。 想要满足这个条件,肯定是不能出现\(aa\)或\(aba\)这种情况 如果没有\(S\)的限制,答案为\(K * (K - 1) * \prod_{i 3}^n (k - 2)\) 如果有\(S\)的限制就除一个\(K\) 然而考场上没注意到会乘爆…

Hadoop数据传输:如何将数据移入和移出Hadoop?

企业在项目中完全使用Hadoop之前,数据移动是必须解决的事情之一。如何将数千台主机日志数据放入Hadoop?从关系型或者No/NewSQL系统以及Hadoop中获取数据的最有效方法是什么?如何将Hadoop中生成的Lucene索引输出到服务器?这些流程如何实现自动化?本文是《Hadoop从…

小程序——遮罩层

小程序遮罩层的实现实质上跟网页版的遮罩层实现没什么区别:主要就是层级的设置; .isTaped{width:100%;height: 100%;display: block;position: fixed; //遮罩层固定位置left: 0rpx; //位置top:0rpx;z-index: 900; //层级关系设置 }

java中集合的底层实现

java中集合的底层实现:list(有序,可重复)名称 底层结构 特点 用途 ArrayList 数组 线程不安全,效率高 查询快,增删慢 LinkedList 双向链表 线程不安全,效率高 查询慢,增删快 Vector 数组 线程…

微信小程序选项卡页面切换

选项卡效果切换如下&#xff1a;滑动即可对应切换 wxml代码 <view classTabSwiper><view classtab {{currentData 0 ? "tabBorer" : ""}} data-current "0" bindtapcheckCurrent>游戏</view><view classtab {{curre…

[转载]Meta Learning单排小教学

原文链接&#xff1a;Meta Learning单排小教学 虽然Meta Learning现在已经非常火了&#xff0c;但是还有很多小伙伴对于Meta Learning不是特别理解。考虑到我的这个AI游乐场将充斥着Meta Learning的分析解读及各种原创思考&#xff0c;所以今天Flood就和大家做一个Meta Learnin…

react--留言板小案例(手敲代码)

流程&#xff1a; 原型 --- 保真图 --- 静态页面( html css js ) --- 一个大组件( react component ) --- 组件拆分 举个栗子 react 简单的一个小案例&#xff0c;实现一个留言板功能&#xff0c;具有添加留言及删除评论的功能&#xff0c;并且同步显示到页面上。 原型、…

小程序——页面刷新

小程序页面跳转到子页面之后如果在子页面进行的操作对其原来的页面有影响&#xff0c;但是当我们再返回回来原来的页面我们会发现页面的数据是不会动态刷新的。如果我们想要实现动态刷新&#xff0c;那可以直接把要加载的数据的操作在onshow()函数写一遍&#xff0c;用一个bool…