修改CSS-margin屬性打造DIV+CSS自適應(yīng)布局

使用負(fù)margin可以使當(dāng)前的div左邊能容納下面的div浮動(dòng)上來(lái)，因此把右邊的div擺在前面，左邊的擺后面，右邊的使用負(fù)margin就能讓左邊的浮上來(lái)，這樣就遮住了右邊的左半部分，只要右邊再內(nèi)部使用一個(gè)div，外邊距為左邊的寬度就實(shí)現(xiàn)了左右的排版。

1、左邊固定，右邊自適應(yīng)

<div>
<div style="float: right; margin: 0 0 0 -200px; width: 100%;">
<div style="margin: 0 0 0 200px; background: #e4e4e4;">
這是右邊部分
</div>
</div>
<div style="float: left; width: 200px; background: #669999">
這是左邊部分
</div>
</div>

2、右邊固定，左邊自適應(yīng)，跟上一個(gè)最大的不同點(diǎn)就是，左右兩個(gè)div容器的代碼的前后位置換了，原因就是"float:rihgt"一定要在"float:left"前面。

<div>
<div style="float: right; width: 200px; background: #669999">
這是右邊部分
</div>
<div style="float: left; margin: 0 -200px 0 0; width: 100%;">
<div style="margin: 0 200px 0 0; background: #e4e4e4;">
這是左邊部分
</div>
</div>
</div>

3、左右各占一定百分比，這就簡(jiǎn)單了，把上面任意一種將200px改成比例值20%就實(shí)現(xiàn)了。

<div>
<div style="float: right; margin: 0 0 0 -20%; width: 100%;">
<div style="margin: 0 0 0 20%; background: #e4e4e4;">
這是右邊部分
</div>
</div>
<div style="float: left; width: 20%; background: #669999">
這是左邊部分
</div>
</div>

4、再加一欄，實(shí)現(xiàn)左中右三欄布局。這只要再加一欄，float為right的多空一些位置就行了。這里以按比例為例

<div>
<div style="float: right; margin: 0 0 0 -40%; width: 100%;">
<div style="margin: 0 0 0 40%; background: #e4e4e4;">
這是右邊部分
</div>
</div>
<div style="float: left; width: 20%; background: #669999">
這是左邊部分
</div>
<div style="float: left; width: 20%; background: #663333">
這是中間部分
</div>
</div>

5、實(shí)現(xiàn)框架頁(yè)的效果（左右可分別出現(xiàn)滾動(dòng)條，頁(yè)面無(wú)滾動(dòng)條）：只要左右div各加position: absolute; overflow: scroll; height: 100%;左邊再加left: 200px;即實(shí)現(xiàn)了，這里用了絕對(duì)定位，因此float屬性可以干掉了

<div>
<div style="margin: 0 0 0 -200px; width: 100%; position: absolute; overflow: scroll;
height: 100%; left: 200px;">
<div style="margin: 0 0 0 200px; background: #e4e4e4;">
這里是右邊部分
</div>
</div>
<div style="width: 200px; background: #669999; position: absolute; overflow: scroll;
height: 100%;">
這是左邊部分
</div>
</div>