負邊距創(chuàng)建自適應(yīng)寬度的流體布局的實現(xiàn)方法
發(fā)布時間：2009-10-15 12:50:04 作者：佚名 
我要評論
我要評論合理使用負邊距技術(shù)，可以幫助我們創(chuàng)建很多有意思的布局，比如自適應(yīng)瀏覽器寬度的流體布局。
國外關(guān)于使用負邊距創(chuàng)建這類布局的技術(shù)文檔，我看到的最早是04年 Ryan Brill 發(fā)表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 （04年 - -！國內(nèi)剛小部分人開始關(guān)注WEB標準化），本文亦可看做是對其的中文講解版。
隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。目前國內(nèi)門戶很多都進行了改版，采用目前的主流———960px左右的寬度。
我認為，對于不太復(fù)雜的網(wǎng)站，采用百分比進行架構(gòu)是個不錯的主意。自適應(yīng)布局的應(yīng)用面還是蠻多的，比如論壇頁面、博客頁面等。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。
這里需要的用到的技術(shù)關(guān)鍵點就一則：負邊距。
【簡單的布局】
OK。我們現(xiàn)在開始。假設(shè)現(xiàn)在需要給自己的博客重新制作前臺，界面的設(shè)計已經(jīng)完成，就差代碼架構(gòu)。我們希望博客的界面可以做到：左側(cè)的主要部分是博客文章 內(nèi)容，這部分需要在不同分辨率瀏覽器下自適應(yīng)寬度；而右側(cè)是側(cè)邊欄，這部分我們想做成一個固定250px寬，預(yù)期效果圖如下：
這是個典型的兩欄布局，我們來做一個初步的架構(gòu)
查看測試頁面一，這是在沒有樣式表的情況下頁面的顯示效果。下面我們給它加上基本的樣式表
提示：您可以先修改部分代碼再運行
定義mainer右邊距為-250px，使得右邊得以空出側(cè)邊欄的寬度，放置側(cè)邊欄。加上樣式表頁面請查看測試頁面二。OK，現(xiàn)在我們看到左側(cè)的內(nèi)容區(qū)域已經(jīng)為側(cè)邊欄空出了相應(yīng)的空間，使得側(cè)邊欄放置在了它應(yīng)該出現(xiàn)的位置。
提示：您可以先修改部分代碼再運行
【去除重疊部分】
我們這時會發(fā)現(xiàn)，左側(cè)的文字內(nèi)容部分卻和側(cè)邊欄有重疊。這時候我們需要另外的一個DIV層，來將左側(cè)文字部分設(shè)置一個足夠大的右邊距，使其不與側(cè)邊欄重疊。并將左側(cè)內(nèi)容部分與側(cè)邊欄部分設(shè)置不同背景色，以示區(qū)分。
增加的CSS
查看
提示：您可以先修改部分代碼再運行
【自適應(yīng)高度】
這時候我們又發(fā)現(xiàn)了一個問題：如果左側(cè)長度繼續(xù)加長，那么，右側(cè)側(cè)邊欄的下部會出現(xiàn)空白。我們希望可以實現(xiàn)視覺上的左右兩欄自適應(yīng)等高。
這里我們可以給外層的mainer DIV設(shè)置一個右對齊縱向重復(fù)的背靜圖片，圖片的寬度我們設(shè)置為250px，即同側(cè)邊欄寬度相同。
CSS部分我們加上
多數(shù)時候我們并不想設(shè)置全部寬度為瀏覽器的寬度，多數(shù)時候我們會設(shè)置小于屏幕寬度的百分比。這種情況下，我們可以在左側(cè)內(nèi)容及右側(cè)側(cè)邊欄外再套一個DIV層，并在側(cè)邊欄下加上一個清除浮動的層，來達到我們的目的。這個時候我們的XHTML會是下面這個樣子。
相應(yīng)的CSS
查看
提示：您可以先修改部分代碼再運行
Ryan Brill 在他的文章里說，外層的wrapper與里面的mainer兩個DIV都應(yīng)該設(shè)置背景 background，以便解決IE里的一個BUG。但我這里只設(shè)置了mainer DIV的背景，在IE6、IE7、FF里并未發(fā)現(xiàn)錯誤。可能他指的是IE5.x，這里忽略。
【進階，三欄布局】
掌握了以上的方法，我們會發(fā)現(xiàn)制作一個三欄的布局也是很簡單的！OK。下面我們把上面的例子變下，我們需要一個三欄的布局，2側(cè)為固定寬度，中部為自適應(yīng)寬度。這僅需要增加一點DIV。
以及另外一個背景圖片
CSS部分增加：
現(xiàn)在來看看我們的頁面。
提示：您可以先修改部分代碼再運行
隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。目前國內(nèi)門戶很多都進行了改版，采用目前的主流———960px左右的寬度。
我認為，對于不太復(fù)雜的網(wǎng)站，采用百分比進行架構(gòu)是個不錯的主意。自適應(yīng)布局的應(yīng)用面還是蠻多的，比如論壇頁面、博客頁面等。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。
這里需要的用到的技術(shù)關(guān)鍵點就一則：負邊距。
【簡單的布局】
OK。我們現(xiàn)在開始。假設(shè)現(xiàn)在需要給自己的博客重新制作前臺，界面的設(shè)計已經(jīng)完成，就差代碼架構(gòu)。我們希望博客的界面可以做到：左側(cè)的主要部分是博客文章 內(nèi)容，這部分需要在不同分辨率瀏覽器下自適應(yīng)寬度；而右側(cè)是側(cè)邊欄，這部分我們想做成一個固定250px寬，預(yù)期效果圖如下：
這是個典型的兩欄布局，我們來做一個初步的架構(gòu)
引用:
<div id=”header”>頂部區(qū)域</div>
<div id=”mainer”>
<h1>使用負邊距創(chuàng)建自適應(yīng)寬度的流體布局</h1>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </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;
}
提示：您可以先修改部分代碼再運行
【去除重疊部分】
我們這時會發(fā)現(xiàn)，左側(cè)的文字內(nèi)容部分卻和側(cè)邊欄有重疊。這時候我們需要另外的一個DIV層，來將左側(cè)文字部分設(shè)置一個足夠大的右邊距，使其不與側(cè)邊欄重疊。并將左側(cè)內(nèi)容部分與側(cè)邊欄部分設(shè)置不同背景色，以示區(qū)分。
引用:
<div id=”mainer”>
<div id=”main”>
<h1>使用負邊距創(chuàng)建自適應(yīng)寬度的流體布局</h1>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </p>
</div>
</div>
引用:
#sideBar {
color: #FFF;
background-color: #36361A;
}
#main {
margin-right: 250px;
background-color: #616030;
}
提示：您可以先修改部分代碼再運行
【自適應(yīng)高度】
這時候我們又發(fā)現(xiàn)了一個問題：如果左側(cè)長度繼續(xù)加長，那么，右側(cè)側(cè)邊欄的下部會出現(xiàn)空白。我們希望可以實現(xiàn)視覺上的左右兩欄自適應(yīng)等高。
這里我們可以給外層的mainer DIV設(shè)置一個右對齊縱向重復(fù)的背靜圖片，圖片的寬度我們設(shè)置為250px，即同側(cè)邊欄寬度相同。
CSS部分我們加上
引用:
#mainer {
background: url(bj1.jpg) repeat-y right bottom;
}
引用:
<div id=”header”>頂部區(qū)域</div>
<div id=”wrapper” class=”mid”>
<div id=”mainer”>
<div id=”main”>
<h1>使用負邊距創(chuàng)建自適應(yīng)寬度的流體布局</h1>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </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>
引用:
#wrapper {width: 92%;}
.clearing {clear: both;}
.mid {margin:0 auto;}
提示：您可以先修改部分代碼再運行
Ryan Brill 在他的文章里說，外層的wrapper與里面的mainer兩個DIV都應(yīng)該設(shè)置背景 background，以便解決IE里的一個BUG。但我這里只設(shè)置了mainer DIV的背景，在IE6、IE7、FF里并未發(fā)現(xiàn)錯誤。可能他指的是IE5.x，這里忽略。
【進階，三欄布局】
掌握了以上的方法，我們會發(fā)現(xiàn)制作一個三欄的布局也是很簡單的！OK。下面我們把上面的例子變下，我們需要一個三欄的布局，2側(cè)為固定寬度，中部為自適應(yīng)寬度。這僅需要增加一點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)建自適應(yīng)寬度的流體布局</h1>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </p>
<p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對的問題。采 用百分比進行架構(gòu)是個不錯的主意。以往我們進行這類架構(gòu)都是使用table表格。但，其實使用很小的技術(shù)就可以創(chuàng)建出符合WEB標準化的自適應(yīng)布局。 </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;
}
提示：您可以先修改部分代碼再運行
相關(guān)文章
- 小編今天為大家介紹一篇HTML自適應(yīng)表格的方法，希望對大家有所幫助。2013-04-03
css 圖片自適應(yīng)寬度 CSS實現(xiàn)控制圖片自適應(yīng)顯示寬度代碼
由于用戶上傳的圖片太大自己又不去調(diào)解，導(dǎo)致展示的時候圖片太大撐開了，直接影響了界面的美觀度，于是想使用css屬性嘗試控制下:給圖片設(shè)置顯示最大的寬度,還好Firefox/Ope2013-02-06左定寬度右自適應(yīng)寬度并且等高布局實現(xiàn)代碼
左側(cè)固定寬，右側(cè)自適應(yīng)屏幕寬;左右兩列，等高布局;左右兩列要求有最小高度，例如：200px;（當內(nèi)容超出200時，會自動以等高的方式增高）要求不用JS或CSS行為實現(xiàn),那么下面2012-12-24display:table-cell實現(xiàn)兼容性的兩欄自適應(yīng)布局實現(xiàn)代碼
display:table-cell實現(xiàn)兼容性的兩欄自適應(yīng)布局,需要的朋友可以參考下2012-12-07網(wǎng)頁設(shè)計技巧:iframe自適應(yīng)高度的問題
所謂iframe自適應(yīng)高度，就是，基于界面美觀和交互的考慮，隱藏了iframe的border和scrollbar，讓人看不出它是個iframe2012-11-12- 寬度自適應(yīng)：就是元素的寬度根居里面的內(nèi)容來變化2012-06-14
Button在IE6、7下的自適應(yīng)寬度問題解決方法
很早就遇到過這么個小問題，但由于其并未影響到實際作用和美觀就沒有正面解決它，現(xiàn)在，我們來試著解決它2012-02-23div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng)效果代碼
textarea標簽為表單元素，一般用在多行文字的輸入。在web應(yīng)用上常見的是評論輸入框，微博信息輸入框等。2010-12-27- div完美自適應(yīng)動態(tài)上下左右居中，多用于信息提示框效果。2010-08-10
CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13