div 自适应宽度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body {margin: 0 auto;text-align: center;} #container {text-align: left;background-color: green;} #top {height: 160px;background-color: red;} #middle {height: 240px;background-color: yellow;} #middle_left {height:240px;width: 200px;float: left;background-color: #333;} #middle_right {height:240px;width: 220px;float: right;background-color: #ddd;} /* 自适应宽度的 div：1.不要设置 width,即 auto ，2.不要设置 float,即 float:none，3.其div的位置应放在最后，比 float='right' 的 div 还靠后*/ #middle_center {height:240px;background-color: #aaa;} #foot {height: 120px;background-color: teal;} .clearDiv {clear:both;} </style> </head> <body> <div id="container"> <div id="top">top</div> <div class="clearDiv"></div> <div id="middle"> <!-- 居左 --> <div id="middle_left">middle left</div> <!-- 居右 --> <div id="middle_right">middle right</div> <!-- 自适应宽度的 div 应放在最后 --> <div id="middle_center">middle center</div> </div> <div class="clearDiv"></div> <div id="foot">foot</div> </div> </body> </html>
ie6 下 float 元素的空隙 问题：
解决方案：
float:left; 时 _margin-right:-3px;
float:right;时 _margin-left:-3px;
转自：http://kuchaguangjie.iteye.com/blog/752234