参考自：http://zhidao.baidu.com/link?url=xtKe0RtLKDa1TZGais49zDuAaja1yGGZVV9zd9qJENV7HrRnd6lls90SW7EQXA3e0tZY3MHLeGiTSQdKHYMrHK
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>测试</title><link rel="stylesheet" type="text/css" href="css.css"></head><body><div class="h">顶部层</div><div class="nav">导航栏</div><div class="l">广告层</div><div class="m">页面主体</div><div class="r">广告层</div><div class="b">底部层</div></body></html>
css.css 内容如下:
html, body { height:100%; padding:0px; margin:0px; }.h, .nav, .l, .m, .r, .b { text-align:center; font-size:14px; border:1px solid #000000; margin:-1px;}.h { height:10%;}.nav { height:5%; background-color:#5C69C2;}.l { float:left; width:20%; height:70%; }.r { float:right; width:20%; height:70%; }.m { float:left; width:60%; height:70%;}.b { clear:both; height:10%; }
改动后使用inline-block布局
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
<style type="text/css">
html, body { height:100%; padding:0px; margin:0px; font-size: 0;}
.h, .nav, .l, .m, .r, .b { text-align:center; font-size:14px; }
.h { height:10%;}
.nav { height:5%; background-color:#5C69C2;}
.l { width:20%; height:70%; display: inline-block;}
.r { width:20%; height:70%; display: inline-block;}
.m { width:60%; height:70%;display: inline-block;}
.b { clear:both; height:10%; }
.h div,.nav div,.l div,.m div,.r div,.b div{
border-top:1px solid #000;
height: 100%;
}
.h div:first-child{
border:none;
}
</style>
</head>
<body>
<div class="h"><div>顶部层</div></div>
<div class="nav"><div>导航栏</div></div>
<div class="l"><div>广告层</div></div>
<div class="m"><div>页面主体</div></div>
<div class="r"><div>广告层</div></div>
<div class="b"><div>底部层</div></div>
</body>
</html>