使用css負邊距建立自適應寬度的流體布局的實現方法

這篇文章主要介紹了關於使用css負邊距建立自適應寬度的流體布局的實現方法，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

合理使用負邊距技術，可以協助我們建立很多有意思的布局，比如自適應瀏覽器寬度的流體布局。

國外關於使用負邊距建立這類布局的技術文檔，我看到的最早是04年 Ryan Brill 發表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 （04年 - -！國內剛小部分人開始關注WEB標準化），本文亦可看做是對其的中文講解版。

隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版，採用目前的主流———960px左右的寬度。

我認為，對於不太複雜的網站，採用百分比進行架構是個不錯的主意。調適型配置的應用面還是蠻多的，比如論壇頁面、部落格頁面等。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。

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

【簡單的布局】

OK。我們現在開始。假設現在需要給自己的部落格重新製作前台，介面的設計已經完成，就差代碼架構。我們希望部落格的介面可以做到：左側的主要部分是部落格文章 內容，這部分需要在不同解析度瀏覽器下自適應寬度；而右側是側邊欄，這部分我們想做成一個固定250px寬，預期如下：

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

引用:

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

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

提示：您可以先修改部分代碼再運行

引用:

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，現在我們看到左側的內容地區已經為側邊欄空出了相應的空間，使得側邊欄放置在了它應該出現的位置。

提示：您可以先修改部分代碼再運行

【去除重疊部分】

我們這時會發現，左側的文字內容部分卻和側邊欄有重疊。這時候我們需要另外的一個p層，來將左側文字部分設定一個足夠大的右邊距，使其不與側邊欄重疊。並將左側內容部分與側邊欄部分設定不同背景色，以示區分。

引用:

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

增加的CSS

引用:

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

查看

提示：您可以先修改部分代碼再運行

【自適應高度】

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

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

CSS部分我們加上

引用:

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

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

引用:

  <p id=”header”>頂部地區</p>    <p id=”wrapper” class=”mid”>    <p id=”mainer”>    <p id=”main”>    <h1>使用負邊距建立自適應寬度的流體布局</h1>    <p>隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采 用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。 </p>    <p>隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采 用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。 </p>    <p>隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采 用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。 </p>    <p>隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采 用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。 </p>    </p>    </p>    <p id=”sideBar”>    <h2>最新文章</h2>    <ul>    <li>最新文章一</li>    <li>最新文章二</li>    <li>最新文章三</li>    </ul>    </p>    <p class=”clear”></p>    </p>    <p id=”footer”>底部地區</p>

相應的CSS

引用:

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

查看

提示：您可以先修改部分代碼再運行

Ryan Brill 在他的文章裡說，外層的wrapper與裡面的mainer兩個p都應該設定背景 background，以便解決IE裡的一個BUG。但我這裡只設定了mainer p的背景，在IE6、IE7、FF裡並未發現錯誤。可能他指的是IE5.x，這裡忽略。

【進階，三欄布局】

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

引用:

    <p id=”header” class=”mid”>頂部地區</p>    <p id=”wrapper” class=”mid”>    <p id=”mainer”>    <p id=”main”>    <p id=”leftBar”>    <h2>欄目標題</h2>    <ul>    <li>文章標題</li>    <li>文章標題</li>    <li>文章標題</li>    </ul>    </p>    <p id=”inmain”>    <h1>使用負邊距建立自適應寬度的流體布局</h1>    <p>隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采 用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。 </p>    <p>隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采 用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。 </p>    <p>隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采 用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。 </p>    <p>隨著越來越大的瀏覽器的出現及普及，網站介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。采 用百分比進行架構是個不錯的主意。以往我們進行這類架構都是使用table表格。但，其實使用很小的技術就可以建立出符合WEB標準化的調適型配置。 </p>    </p>    </p>    </p>    <p id=”sideBar”>    <h2>最新文章</h2>    <ul>    <li>最新文章一</li>    <li>最新文章二</li>    <li>最新文章三</li>    </ul>    </p>    <p class=”clear”> </p>    </p>    <p id=”footer” class=”mid”>底部地區</p>

以及另外一個背景圖片

CSS部分增加：

引用:

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

現在來看看我們的頁面。

提示：您可以先修改部分代碼再運行

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！