乌徒帮技术范儿技术中心HTML代码 › display:table解决float漂浮引起的错位

display:table解决float漂浮引起的错位

分类:HTML代码

在css中我们需要注意display:table这一属性,这一属性能帮助我们在特殊情况下解决由于各种漂浮引起的错位。

例:

<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="foot"></div>

在上面这段小代码中,我们规定:

#left{float:left;}
#right{float:right;}

在标准浏览器中,无论你怎么对其高度,宽度进行设置规定,都将面对由于内容不足而引起的错位,例如right的高度没有left高,那么foot中的内容挤到right下方,而如果我们做#content{display:table}的规定的话,那么content就将以表格规制,高度以left,right中的高者为标准,foot就不会飘到right下方。

注意:乌徒帮发现当使用display:table之后,在IE8下该区域内文字无法被选中,这个hack需要开发者注意,因此该属性应该慎用,只有在其他方法下无法解决的时候才使用。

后续:这种方法并不科学,正确的方法应该用clear:both属性,如上面的那段代码,我们将left和right做了漂浮后,会发现foot内的内容位置不对,应该给#foot加上clear:both。

填写个人信息,赶快回复吧!