當(dāng)前位置：首頁(yè) > JS代碼 > JS特效代碼 > CSS樣式

CSS布局：中欄固定寬度,左右兩欄寬度自適應(yīng)

2012-11-19　來源/作者：懶人圖庫(kù)　分類：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=gb2312" />
<title>CSS布局：中欄固定寬度,左右兩欄寬度相等同時(shí)自適應(yīng)寬度-懶人圖庫(kù)</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>　查找更多代碼，請(qǐng)?jiān)L問：<a href="http://m.cxj168.com/" target="_blank">懶人圖庫(kù)</a></p>
<p><script type="text/javascript" src="http://d.lanrentuku.com/goto/js-preview-728x90.js"></script></p>
</div>

<div   class="wowumuy"   id="header">
<H1>固定中欄寬度, 左右兩欄寬度相等和自適應(yīng)</H1></DIV>
<div   class="auamqye"   id="left">
<div   class="wakgyo0"   id="innerLeft" class="inner">
<P><STRONG>表現(xiàn):</STRONG>中間一欄居中與固定寬度，左右兩欄寬度相等同時(shí)自適應(yīng)寬度。</P></DIV></DIV>
<div   class="giqqgw0"   id="middle">
<div   class="wmwwa0u"   id="innerMiddle" class="inner">
<P><STRONG>原理:</STRONG>利用margin的負(fù)值錯(cuò)別固定的寬度，因?yàn)橐謨蛇叄灾灰e(cuò)開一中間的固定寬度就行</P></DIV>
</DIV>
<div   class="og2gmc8"   id="right">
<div   class="qyuei2u"   id="innerRight" class="inner">
<P><STRONG>問題:</STRONG>IE對(duì)寬度乘百分比的計(jì)算不大好，有必要犧牲一兩px的顯示，IE6也沒最小寬度。</P></DIV></DIV>

</body>
</html>

運(yùn)行代碼保存代碼提示：您可以先修改部分代碼再運(yùn)行，保存代碼功能在Firefox下無效。

表現(xiàn)：中間一欄居中與固定寬度，左右兩欄寬度相等同時(shí)自適應(yīng)寬度。

原理：利用margin的負(fù)值錯(cuò)別固定的寬度，因?yàn)橐謨蛇叄灾灰e(cuò)開一中間的固定寬度就行。

問題：IE對(duì)寬度乘百分比的計(jì)算不大好，有必要犧牲一兩px的顯示，IE6也û最小寬度。

標(biāo)簽：CSS樣式