这个问题应该是使用标准布局发生兼容性问题的“典范”了,干网页制作的人几乎都遇见过,我在做页面的时候也遇见过。因为#box的.left与.right都浮动了,所以#box计算不到子元素的高度;导致#box没有获得高度,没有高度就局限了background与border的显示区域。
解决方法一:
#boxBg {float:left;}
再#box后面再加一个容器#boxBg,让它浮动起来。因为#boxBg也浮动起来了,所以它跟里面的.left与.right是属于一个层面上的位置,所以这样#boxBg就能计算子元素的高度了。#box用来限制宽度以及居中,background和border的显示与高度计算就用#boxBg来实现 。
代码如下
以下为引用的内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>实例一</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * {font:normal 12px/150% "宋体",Arial;padding:0;margin:0;} body {text-align:center;} #head,#box,#foot {width:750px;margin:0 auto;text-align:left;} .left {float:left;width:200px;height:100px;} .right {float:right;width:550px;height:100px;} #boxBg {float:left;background:#ccc;} --> </style> </head> <body> <div id="head">HEAD</div> <div id="box"><div id="boxBg"> <div class="left">LEFT</div> <div class="right">RIGHT - 请用非IE浏览器测试</div> </div></div> <div id="foot">FOOT</div> </body> </html> |
解决方法二:
.ad {clear:left;}
在.right后面再加一个容器.ad,让它清除浮动。这招是把最底(后)的.ad设置清除浮动,这样#box就能计算到.ad的实际位置。即使#box没有计算到.left与.right的位置也无所谓了,因为.ad始终是在最下面的。所以只要计算到了它就OK了~!
代码如下
以下为引用的内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>实例一</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * {font:normal 12px/150% "宋体",Arial;padding:0;margin:0;} body {text-align:center;} #head,#box,#foot {width:750px;margin:0 auto;text-align:left;} #box {background:#eee;} .left {float:left;width:200px;height:100px;} .right {float:right;width:550px;height:100px;} .ad {clear:left;} --> </style> </head> <body> <div id="head">HEAD</div> <div id="box"> <div class="left">LEFT</div> <div class="right">RIGHT - 请用非IE浏览器测试</div> <div class="ad"></div> </div> <div id="foot">FOOT</div> </body> </html> |
解决方法三:
干嘛非要让.left与.right浮动啊?.left与.right不浮动就能计算高度了。