CSS布局：中栏固定宽度,左右两栏宽度自适应--HTML5中文学习网

<!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=gb2312" /> <title>CSS布局：中栏固定宽度,左右两栏宽度相等同时自适应宽度-懒人图库</title> <STYLE type="text/css"> *{ 	margin:0; 	padding:0; } body{ 	font-family:Verdana, Arial, Helvetica, sans-serif; 	min-width:620px; } #header,#footer{ 	clear:both; 	padding:10px; 	text-align:center;  } #left, #right{ 	float:left; 	width:50%; 	margin:0 0 0 -151px; } #innerLeft, #innerRight{ 	margin:0 0 0 151px; 	background-color:#efefef; } #middle{ 	float:left; 	width:300px; 	background-color:#ccc; } .inner { 	padding:12px; } </STYLE> </head>  <body> <div style="text-align:center;margin:20px"> <p>作者：<A href="http://www.aoao.org.cn/" target="_blank">aoao</A>　查找更多代码，请访问：<a href="http://www.html5cn.com.cn/" target="_blank">懒人图库</a></p> <p><script type="text/javascript"> /*460*60，创建于2013-2-28*/ var cpro_id = "u1222882"; </script> <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script></p> </div>  <DIV id="header"> <H1>固定中栏宽度, 左右两栏宽度相等和自适应</H1></DIV> <DIV id="left"> <DIV id="innerLeft" class="inner"> <P><STRONG>表现:</STRONG>中间一栏居中与固定宽度，左右两栏宽度相等同时自适应宽度。</P></DIV></DIV> <DIV id="middle"> <DIV id="innerMiddle" class="inner"> <P><STRONG>原理:</STRONG>利用margin的负值错别固定的宽度，因为要分两边，所以只要错开一中间的固定宽度就行</P></DIV> </DIV> <DIV id="right"> <DIV id="innerRight" class="inner"> <P><STRONG>问题:</STRONG>IE对宽度乘百分比的计算不大好，有必要牺牲一两px的显示，IE6也没最小宽度。</P></DIV></DIV>  </body> </html>

运行代码 保存代码 提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

表现：中间一栏居中与固定宽度，左右两栏宽度相等同时自适应宽度。

原理：利用margin的负值错别固定的宽度，因为要分两边，所以只要错开一中间的固定宽度就行。

问题：IE对宽度乘百分比的计算不大好，有必要牺牲一两px的显示，IE6也û最小宽度。