DIV+CSS三行三列布局，中间自适应，完美支持主流浏览器
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Advanced CSS Layout</title> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } * { margin: 0; padding: 0; } .c { clear: both; } /* 容器 */ .page { width: 960px;/* 变量 */ margin: 0 auto; } .head { height: 60px;/* 变量 */ background-color: #9acd32; } .foot { height: 80px;/* 变量 */ background-color: #60A179; } .left { float: left; width: 100px;/* 变量 */ background-color: #ff69b4; } .right { float: right; width: 120px;/* 变量 */ background-color: #e9967a; } /* not IE6 */ .center { padding-left: 100px;/* 变量(同.left) */ padding-right: 120px;/* 变量(同.right) */ } /* IE 6 hack*/ .center { _display:inline; _zoom:1; _margin-left:-3px; _margin-right:-3px; _padding-left: 0; _padding-right: 0; } .main { background-color: #fffacd; width: 100%;} </style></head><body> <div class="page"> <div class="head">head</div> <div class="middle"> <div class="left"> <p>left</p> <p>left</p> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> <p>right</p> <p>right</p> </div> <div class="center"> <div class="main"> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> <p>这里可以放任何物体</p> </div> </div> <div class="c"></div> </div> <div class="foot">foot</div> </div></body></html> http://dl.iteye.com/upload/attachment/0076/0281/f182bb47-2b79-3aa1-8d9c-35587c318d4d.png
页:
[1]