网页布局面试题(三)
如上图为一般门户型网站的三列布局方案。
要求：
1．三列等高, 不可用背景图片平铺
2．Main列先显示出来
请用css来规划此类布局。
注意浏览器的兼容性。
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三栏等高(wwww.hemin.cn)</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:18px; font-family:"新宋体";}
body {min-width: 850px;width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); }
.Top{background:#999; height:100px;}
.Middle,.Left,.Right{ float:left;padding-bottom: 32767px;margin-bottom:-32767px;}
.Content{ overflow:hidden;padding:0 250px 0 300px; zoom:1;position:relative;}
.Middle{background:#090;;width:100%;}
.Left{background:#333;width:300px;margin-left:-100%; position:relative; right:300px;_left:250px;}
.Right{background:#666;width:250px;margin-right:-100%;}
</style>
</head>
<body>
<div class="Top">顶部</div>
<div class="Content">
<div class="Middle">中间</div>
<div class="Left">左边</div>
<div class="Right">右边<br /><br /><br /></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三栏等高(wwww.hemin.cn)</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:18px; font-family:"新宋体";}
body {min-width: 850px;width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); }
.Top{background:#999; height:100px;}
.Middle,.Left,.Right{ float:left;padding-bottom: 32767px;margin-bottom:-32767px;}
.Content{ overflow:hidden;padding:0 250px 0 300px; zoom:1;position:relative;}
.Middle{background:#090;;width:100%;}
.Left{background:#333;width:300px;margin-left:-100%; position:relative; right:300px;_left:250px;}
.Right{background:#666;width:250px;margin-right:-100%;}
</style>
</head>
<body>
<div class="Top">顶部</div>
<div class="Content">
<div class="Middle">中间</div>
<div class="Left">左边</div>
<div class="Right">右边<br /><br /><br /></div>
</div>
</body>
</html>
引用自：http://topic.csdn.net/u/20091009/11/179bf6c0-437d-4875-b03b-d11211e69779.html?seed=251492551&r=60302840#r_60302840
浙公网安备 33010602011771号