負(fù)邊距(negative margin)實(shí)現(xiàn)自適應(yīng)的div左右排版

沽渡 2013-05-02

展開全文

我記得我寫過一篇 css中的負(fù)margin技術(shù)以及運(yùn)用的文章，那是很久以前的事了，現(xiàn)在看來那篇文章講了很多，但是始終沒把握好重點(diǎn)，現(xiàn)在再通過這篇文章clear一下思路。

左右排版本來是可以這樣實(shí)現(xiàn)的：兩邊都使用百分比，然后左右浮動(dòng)。但是這樣做滿足不了下面這樣的場(chǎng)景：在一個(gè)文章頁面里面，分為左邊的正文區(qū)域和右邊的與文章關(guān)聯(lián)的其他信息區(qū)域，我想讓正文區(qū)域能隨著用戶的顯示屏寬度變化而變化，這似乎百分比就能做到，但是如果使用百分比，左右兩邊都必須有一個(gè)固定的比值，那樣右邊也會(huì)隨著用戶顯示屏的寬度變化，如果用戶的顯示屏很寬，那這右邊就顯得似乎國(guó)語寬了，正文無論多款是無所謂的，但是側(cè)邊最好是一個(gè)固定值。
就像這種下圖所示效果：

也就是說我需要一個(gè)左邊自適應(yīng)，而右邊固定的左右布局，或者說某一邊固定，另一邊占據(jù)剩余部分，該如何做呢？
我找到的最好的答案是使用 負(fù)margin （配合浮動(dòng)），下面概括一下原理：
使用負(fù)margin可以使當(dāng)前的div左邊能容納下面的div浮動(dòng)上來，因此把右邊的div擺在前面，左邊的擺后面，右邊的使用負(fù)margin就能讓左邊的浮上來，這樣就遮住了右邊的左半部分，只要右邊再內(nèi)部使用一個(gè)div，外左邊距為左邊的寬度就實(shí)現(xiàn)了左右的排版。

1、左邊固定，右邊自適應(yīng)
（1）右邊使用margin-left值為200（剛好是左邊的寬度）的寬度，那么左邊就剛好能浮動(dòng)上來。為什么說浮動(dòng)上來呢，因?yàn)槿绻麤]有這個(gè)margin: 0 0 0 -200px;由于右邊的寬度是100%，因此左邊肯定是排在下面的。
（2）左邊雖然能浮動(dòng)上來，但是右邊和左邊的內(nèi)容是有重疊的

所以你還需要綠色部分的代碼，右邊再內(nèi)部使用一個(gè)div，外左邊距為左邊的寬度

<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>
這個(gè)產(chǎn)生的效果如下圖：（圖片區(qū)域?qū)挾裙潭ǖ?，但是文字是占?jù)這個(gè)div的剩余部分，這里右邊沒有緊貼邊框是因?yàn)楦竏iv有較大padding的原因沒能擠滿，不要受誤導(dǎo)）。
提示：真正在實(shí)現(xiàn)的時(shí)候好像沒必要左邊必須寫在后面，我試過，即使按從左到右書寫也是可以的，但是很多大型網(wǎng)站都是反著寫，我就按正規(guī)的來講了。

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>

復(fù)制代碼

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>

復(fù)制代碼

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>

復(fù)制代碼

5、實(shí)現(xiàn)框架頁的效果（左右可分別出現(xiàn)滾動(dòng)條，頁面無滾動(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>

復(fù)制代碼

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：沽渡 > 《CSS學(xué)習(xí)》

舉報(bào)/認(rèn)領(lǐng)