<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
/*在IE6中,#left{margin-left:-100%;}中的100%是整个可见区域的(包含body的margin),
这样就会比我们预期的多偏移一些*/
margin:0px;
}
#box
{
width:100%;
float:left;
}
#middle
{
height:100px;
margin:0 300px;
background-color:red;
}
#left
{
height:100px;
width:200px;
float:left;
margin-left:-100%;
position:relative;
left:100px;
background-color:green;
}
#right
{
height:100px;
width:200px;
float:left;
margin-left:-300px;
background-color:blue;
}
</style>
</head>
<body>
<!--优先加载中间部分,后加载两侧-->
<div id="box">
<div id="middle"></div>
</div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
附注:
1. 在任何浏览器中,body都会自动设置一个非零的margin值,我们可以通过CSS将其置为(body{margin:0px;})。
2. 本代码在IE6~9、FF及Chrome下测试通过。