实现一个三栏布局的网页，中间部分要自适应宽度并且优先加载，兼容IE&FF&Chrome。

来源：互联网发布：网络直播评论编辑：程序博客网时间：2024/06/08 11:17

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

附注：

1. 在任何浏览器中，body都会自动设置一个非零的margin值，我们可以通过CSS将其置为（body{margin:0px;}）。

2. 本代码在IE6~9、FF及Chrome下测试通过。

0 0