負(fù)邊距創(chuàng)建自適應(yīng)寬度的流體布局的實(shí)現(xiàn)方法

2024-07-11 08:45:31

字體：大中小

供稿：網(wǎng)友

國外關(guān)于使用負(fù)邊距創(chuàng)建這類布局的技術(shù)文檔，我看到的最早是04年 Ryan Brill 發(fā)表在 A List Apart 上的《Creating Liquid Layouts with Negative Margins》（04年 - -！國內(nèi)剛小部分人開始關(guān)注WEB標(biāo)準(zhǔn)化），本文亦可看做是對(duì)其的中文講解版。

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

我認(rèn)為，對(duì)于不太復(fù)雜的網(wǎng)站，采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。自適應(yīng)布局的應(yīng)用面還是蠻多的，比如論壇頁面、博客頁面等。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。

這里需要的用到的技術(shù)關(guān)鍵點(diǎn)就一則：負(fù)邊距。

【簡(jiǎn)單的布局】

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

這是個(gè)典型的兩欄布局，我們來做一個(gè)初步的架構(gòu)

引用:

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

查看測(cè)試頁面一，這是在沒有樣式表的情況下頁面的顯示效果。下面我們給它加上基本的樣式表

提示：您可以先修改部分代碼再運(yùn)行

引用:

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，使得右邊得以空出側(cè)邊欄的寬度，放置側(cè)邊欄。加上樣式表頁面請(qǐng)查看測(cè)試頁面二。OK，現(xiàn)在我們看到左側(cè)的內(nèi)容區(qū)域已經(jīng)為側(cè)邊欄空出了相應(yīng)的空間，使得側(cè)邊欄放置在了它應(yīng)該出現(xiàn)的位置。

提示：您可以先修改部分代碼再運(yùn)行

【去除重疊部分】

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

引用:

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

增加的CSS

引用:

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

查看

提示：您可以先修改部分代碼再運(yùn)行

【自適應(yīng)高度】

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

這里我們可以給外層的mainer DIV設(shè)置一個(gè)右對(duì)齊縱向重復(fù)的背靜圖片，圖片的寬度我們?cè)O(shè)置為250px，即同側(cè)邊欄寬度相同。

CSS部分我們加上

引用:

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

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

引用:

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

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

相應(yīng)的CSS

引用:

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

查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>測(cè)試頁面四</title> <style type="text/css"> <!-- body,p,h1,h2,ul {margin:0;padding:0;} .mid {margin:0 auto;} #header {background-color: #A8A754;} #footer {background-color: #A8A754;clear: both;} #mainer {width: 100%;margin-right: -250px;float: left;background: url(bj1.jpg) repeat-y right bottom;} #main {margin-right: 250px;background-color: #616030;} #sideBar {float: right;width: 250px;color: #FFF;background-color: #36361A;} .clearing {clear: both;} #wrapper {width: 92%;} </style> </head> <body> <div id="header" class="mid">頂部區(qū)域</div> <div id="wrapper" class="mid"> <div id="mainer"> <div id="main"> <h1>使用負(fù)邊距創(chuàng)建自適應(yīng)寬度的流體布局</h1> <p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對(duì)的問題。采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。</p> <p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對(duì)的問題。采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。</p> <p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對(duì)的問題。采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。</p> <p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對(duì)的問題。采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。</p> </div> </div> <div id="sideBar"> <h2>最新文章</h2> <ul> <li>最新文章一</li> <li>最新文章二</li> <li>最新文章三</li> </ul> </div> <div class="clear">&nbsp;</div> </div> <div id="footer" class="mid">底部區(qū)域</div> </body> </html>

提示：您可以先修改部分代碼再運(yùn)行

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

【進(jìn)階，三欄布局】

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

引用:

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

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

<div id=”leftBar”>
<h2>欄目標(biāo)題</h2>
<ul>
<li>文章標(biāo)題</li>
<li>文章標(biāo)題</li>
<li>文章標(biāo)題</li>
</ul>
</div>

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

以及另外一個(gè)背景圖片

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)在來看看我們的頁面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>測(cè)試頁面五</title><style type="text/css"><!--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;background: url(bj1.jpg) repeat-y right bottom;}#main {margin-right: 250px;background: url(bj2.jpg) #616030 repeat-y left bottom;}#sideBar {float: right;width: 250px;color: #FFF;background-color: #36361A;}#wrapper {width: 92%;}.clearing {clear: both;}.mid {margin:0 auto;}#leftBar {float: left;width: 150px;}#inmain {margin-left: 150px;}</style></head><body><div id="header" class="mid">頂部區(qū)域</div><div id="wrapper" class="mid"><div id="mainer">  <div id="main">      <div id="leftBar">      <h2>欄目標(biāo)題</h2>      <ul>        <li>文章標(biāo)題</li>        <li>文章標(biāo)題</li>        <li>文章標(biāo)題</li>      </ul>    </div>        <div id="inmain">      <h1>使用負(fù)邊距創(chuàng)建自適應(yīng)寬度的流體布局</h1>      <p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對(duì)的問題。采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。</p>      <p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對(duì)的問題。采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。</p>      <p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對(duì)的問題。采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。</p>      <p>隨著越來越大的瀏覽器的出現(xiàn)及普及，網(wǎng)站界面如何能滿足不同分辨率瀏覽器使用者的瀏覽需求，逐漸成為前端開發(fā)工程師必須面對(duì)的問題。采用百分比進(jìn)行架構(gòu)是個(gè)不錯(cuò)的主意。以往我們進(jìn)行這類架構(gòu)都是使用table表格。但，其實(shí)使用很小的技術(shù)就可以創(chuàng)建出符合WEB標(biāo)準(zhǔn)化的自適應(yīng)布局。</p>    </div>      </div></div><div id="sideBar">  <h2>最新文章</h2>  <ul>    <li>最新文章一</li>    <li>最新文章二</li>    <li>最新文章三</li>  </ul></div><div class="clear">&nbsp;</div></div><div id="footer" class="mid">底部區(qū)域</div></body></html>

提示：您可以先修改部分代碼再運(yùn)行

上一篇：css 滑動(dòng)門技術(shù)的介紹及實(shí)例分享

下一篇：有利于SEO的DIV+CSS的命名規(guī)則小結(jié)