float解决图片下出现空白的问题

转载 2012年03月23日 15:24:28

在一个页面中,上下有几个块级元素,其中动态填充图片,为了页面的美观,要求图片间紧密结合,没有空白。

然而,在IE下,中间一张图片下总是会出现一小段空白,FF下倒正常。我尝试设置了各种属性,包括margin、padding等,均没有效果,很是不爽。

后来,看到网友介绍设置image的float属性可以解决这个问题,于是就尝试加上这个样式:

float:left

果然,讨厌的空白不见了,无论在ie还是ff下都很正常。

为什么设置图片浮动就能消除IE下出现的空白呢?这个问题我还没有想明白。我查了一下资料,float元素可以使用文字环绕在一个元素的四周。那么,设置为left,也就是可以让图片浮动在左边。但是,在IE下,图片下的这一小段空白是如何产生的,由于对float的理解并不是很深刻,我依然不能理解,如果你对此很了解,希望能赐教。


float解决图片下出现空白的问题

在一个页面中,上下有几个块级元素,其中动态填充图片,为了页面的美观,要求图片间紧密结合,没有空白。然而,在IE下,中间一张图片下总是会出现一小段空白,FF下倒正常。我尝试设置了各种属性,包括margi...
  • gaofeng2000
  • gaofeng2000
  • 2008年11月18日 09:26
  • 2095

接上篇(解决float导致塌陷问题)之clear:both失效

在今天写的途中发现一个问题,虽然解决,可并不知道原因是什么,现在先记下来。 问题的简化版大概是这样:若父元素里有一个以上的元素为浮动,那么,清除浮动(无论是用伪类还是新增一个类的方法)无效。 ...
  • normol
  • normol
  • 2016年10月21日 22:15
  • 635

关于布局中float的常见问题及解决办法

在网页的布局中,我们经常要使用到float在进行元素的排版,那么随之而来的就是许多的问题,个人在开发过程中最常见的问题主要就是两种,一种是元素的浮动导致的布局混乱的问题,另一种是浮动后的盒子模型塌陷问...
  • sir1241
  • sir1241
  • 2016年08月27日 11:07
  • 1124

解决inline-block引起的空白间距问题

当我们在对元素的display属性使用inline-block值时,会在元素间形成一定宽度的空白间距。   下面看一下源代码: inline-block li{ display:inli...
  • annsheshira23
  • annsheshira23
  • 2015年08月18日 21:35
  • 1101

图片下面出现空白像素的6种解决办法

图片转换为块级对象可去掉下边空白 设置img为:display:block; 设置图片的垂直对齐方式 设置图片的vertical-align属性为“top,text-top,bottom,text-b...
  • qq_34648000
  • qq_34648000
  • 2016年09月17日 09:20
  • 630

安卓listview去除底部有空白

Android其实已经考虑到ListView控件的智能滚动操作。直接在Layout中写即可,注意下面的stackFromBottom以及 transcriptMode这两个属性。涉及代码如下:   <...
  • xunleji
  • xunleji
  • 2016年08月17日 16:17
  • 1222

nw.js 打包白屏问题解决方案 node-webkit白屏

nw.js 打包白屏问题解决方案
  • xllily_11
  • xllily_11
  • 2016年02月01日 17:12
  • 2571

ImageView显示图片时,上下出现多余空白。

ImageView显示图片时,上下出现多余空白,一开始以为是布局的问题,怎么都没有找到哪里设置了margin或padding。最后看了别人的解决方法,找到了解决办法。 解决办法如下: 1、...
  • u012585988
  • u012585988
  • 2016年12月26日 10:13
  • 555

1px问题解决方案

方案一:使用background-image               优点: 可以设置单条,多条边框 可以设置颜色 缺点: 大量使用渐变可能导致性能瓶颈 代码...
  • caochenyu0
  • caochenyu0
  • 2016年12月22日 13:35
  • 502

web移动端解决右滑出现空白

最近在写移动端项目,应用在微信上面的一个webapp(vue单页面开发),遇到了一个很尴尬的问题,就是有些页面之间的跳转是通过储存在sessionStorage中的某些数据,然后进行判断再渲染不同的组...
  • xiaogezl
  • xiaogezl
  • 2017年04月11日 10:58
  • 1438
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:float解决图片下出现空白的问题
举报原因:
原因补充:

(最多只允许输入30个字)