<div style="width:100%; margin:0 auto;">
<div style="width:200px; float:right; background-color:#960">這是右側的內容 固定寬度</div>
<div style="width:150px; float:left; background:#6FF">這是左側的內容 固定寬度</div>
<div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容,自適應寬度</div>
</div>
第二種:左右兩側采用絕對定位 中間同樣采用margin-left margin-right方法:
第三種負的margin
使用這種方法就稍微復雜了一些了,使用的是負的margin值,而且html標簽也增加了,先來看其代碼吧:
<div id="main">
<div id="mainContainer">main content</div></div><div id="left">
<div id="leftContainer" class="inner">left content</div></div><div id="right">
<div id="rightContainer" class="inner">right</div></div>
#main {
float: left;
width: 100%;
}
#mainContainer {
margin: 0 230px;
height: 200px;
background: green;
}
#left {
float: left;
margin-left: -100%;
width: 230px}
#right {
float: left;
margin-left: -230px;
width: 230px;
}
#left .inner,
#right .inner {
background: orange;
margin: 0 10px;
height: 200px;
}