菜鸟玩CSS的float(漂移哦)

LMS
1.8K+ 2

前几天给mark做个网页,在页面内让图片放在div里,然后让div横排,每行3个,递增后自动换行,说起来有点不清楚,其实就是一个float:left;,为防止图片大小不一变形,我在css里限制了图片的宽度,这就算搞定了。

可是mark同学在使用的过程中发现,其他所有的图片都规规矩矩的排排坐、吃果果,就一张图特立独行的自己一行,问我什么情况。我研究半天,怎么删啊改啊,不管是什么浏览器啊,都是那样,就是没看出什么问题在哪里来,一下纳闷了。

后来不经意发现,那个特例独行的图片所在的div居然比其他所有的div高出1px,再认真看了下图片,原来图片大了1px,硬是将这个div给挤出其他所有规矩的div的行列。找到问题自然好解决,在上面限定图片宽度的基础上,再限定了图片的高度,高度一统一问题就解决了。当然,如果图片不是按比例的,会因为被限制了高度和宽度而拉伸扭曲,不过这也没办法,为了防止有人冒泡,只能这样了。

以往float:left;的时候最多的都是li,li 一般都是套着链接a,所以从没有遇到高度不齐的时候,也就从没有发现有float系列里突然跑出个独立一行的情况,突然冒出这个问题来,还真找了大半天。

另外,float的时候ie下margin的距离会比其他浏览器大,这时候用display:inline;,就能解决这个问题,或者用padding代替。

另另外,float的时候ie下,外面的div会套不住里面float了的div,收缩成一条线,这时候用overflow:hidden;_zoom:1;,就能解决问题,或者干脆指定外面div的高度,这样也跑不了。

IE6的情绪不好照顾。

THE END

评论 2

  1. 有一點我不是很明白,CSS屬性的前面加上下劃線是什麼意思?比如說“_zoom:1;”,前面的這個“_”是什麼作用我就不是十分的清楚了... .

    1. 那个_其实是写给ie6看的,其他浏览器都是无视它的。

发表评论

Submit