合理使用負邊距技術，可以幫助我們創(chuàng)建很多有意思的布局，比如自適應瀏覽器寬度的流體布局。國外關于使用負邊距創(chuàng)建這類布局的技術文檔，我看到的最早是04年 Ryan Brill 發(fā)表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 （04年 - -！國內剛小部分人開始關注WEB標準化），本文亦可看做是對其的中文翻譯版。

隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。目前國內門戶很多都進行了改版，采用目前的主流--960px左右的寬度。

我認為，對于不太復雜的網(wǎng)站，采用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的，比如論壇頁面、博客頁面等。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。

這里需要的用到的技術關鍵點就一則：負邊距。

【簡單的布局】

OK。我們現(xiàn)在開始。假設現(xiàn)在需要給自己的博客重新制作前臺，界面的設計已經(jīng)完成，就差代碼架構。我們希望博客的界面可以做到：左側的主要部分是博客文章內容，這部分需要在不同分辨率瀏覽器下自適應寬度；而右側是側邊欄，這部分我們想做成一個固定250px寬，預期效果圖如下：

這是個典型的兩欄布局，我們來做一個初步的架構

<div id="header">頂部區(qū)域</div>
<div id="mainer">
<h1>使用負邊距創(chuàng)建自適應寬度的流體布局</h1>
<p> 隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
</div>
<div id="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div id="footer">底部區(qū)域</div>

這是在沒有樣式表的情況下頁面的顯示效果。下面我們給它加上基本的樣式表

body,p,h1,h2,ul {
margin:0;padding:0;
}
#header {
background-color: #A8A754;
}
#footer {
background-color: #A8A754;
clear: both;
}
#mainer {
width: 100%;
margin-right: -250px;
float: left;
}
#sideBar {
float: right;
width: 250px;
}

定義mainer右邊距為-250px，使得右邊得以空出側邊欄的寬度，放置側邊欄。加上樣式表頁面請查看
測試頁面二。

OK，現(xiàn)在我們看到左側的內容區(qū)域已經(jīng)為側邊欄空出了相應的空間，使得側邊欄放置在了它應該出現(xiàn)的位置。

【去除重疊部分】

我們這時會發(fā)現(xiàn)，左側的文字內容部分卻和側邊欄有重疊。這時候我們需要另外的一個DIV層，來將左側文字部分設置一個足夠大的右邊距，使其不與側邊欄重疊。并將左側內容部分與側邊欄部分設置不同背景色，以示區(qū)分。

<div id="mainer">
<div id="main">
<h1>使用負邊距創(chuàng)建自適應寬度的流體布局</h1>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
</div>
</div>

增加的CSS

#sideBar {
color: #FFF;
background-color: #36361A;
}
#main {
margin-right: 250px;
background-color: #616030;
}

【自適應高度】

這時候我們又發(fā)現(xiàn)了一個問題：如果左側長度繼續(xù)加長，那么，右側側邊欄的下部會出現(xiàn)空白。我們希望可以實現(xiàn)視覺上的左右兩欄自適應等高。

這里我們可以給外層的mainer DIV設置一個右對齊縱向重復的背靜圖片，圖片的寬度我們設置為250px，即同側邊欄寬度相同。

CSS部分我們加上

#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}

多數(shù)時候我們并不想設置全部寬度為瀏覽器的寬度，多數(shù)時候我們會設置小于屏幕寬度的百分比。這種情況下，我們可以在左側內容及右側側邊欄外再套一個DIV層，并在側邊欄下加上一個清除浮動的層，來達到我們的目的。這個時候我們的XHTML會是下面這個樣子。

<div id="header">頂部區(qū)域</div>

<div id="wrapper" class="mid">
<div id="mainer">
<div id="main">
<h1>使用負邊距創(chuàng)建自適應寬度的流體布局</h1>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
</div>
</div>

<div id="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div class="clear"></div>
</div>

<div id="footer">底部區(qū)域</div>

相應的CSS

#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}

Ryan Brill 在他的文章里說，外層的wrapper與里面的mainer兩個DIV都應該設置背景 background，以便解決IE里的一個BUG。但我這里只設置了mainer DIV的背景，在IE6、IE7、FF里并未發(fā)現(xiàn)錯誤。可能他指的是IE5.x，這里忽略。

【進階，三欄布局】

掌握了以上的方法，我們會發(fā)現(xiàn)制作一個三欄的布局也是很簡單的！OK。下面我們把上面的例子變下，我們需要一個三欄的布局，2側為固定寬度，中部為自適應寬度。這僅需要增加一點DIV。

<div id="header" class="mid">頂部區(qū)域</div>

<div id="wrapper" class="mid">
<div id="mainer">
<div id="main">

<div id="leftBar">
<h2>欄目標題</h2>
<ul>
<li>文章標題</li>
<li>文章標題</li>
<li>文章標題</li>
</ul>
</div>

<div id="inmain">
<h1>使用負邊距創(chuàng)建自適應寬度的流體布局</h1>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以創(chuàng)建出符合WEB標準化的自適應布局。</p>
</div>

</div>
</div>

<div id="sideBar">
<h2>最新文章</h2>
<ul>
<li>最新文章一</li>
<li>最新文章二</li>
<li>最新文章三</li>
</ul>
</div>
<div class="clear"> </div>
</div>

<div id="footer" class="mid">底部區(qū)域</div>

以及另外一個背景圖片

CSS部分增加：

#main {
margin-right: 250px;
background: url(bj2.jpg) #616030 repeat-y left bottom;
}
#leftBar {
float: left;
width: 150px;
}
#inmain {
margin-left: 150px;
}

現(xiàn)在來看看我們的頁面
測試頁面五。

最新評論