隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版，採用目前的主流–960px左右的寬度。
我認為，對於不太複雜的**，採用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的，比如論壇頁面、部落格頁面等。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
這裡需要的用到的技術關鍵點就一則：負邊距。
【簡單的布局】
ok。 我們現在開始。假設現在需要給自己的部落格重新製作前台，介面的設計已經完成，就差**架構。我們希望部落格的介面可以做到：左側的主要部分是部落格文章內容， 這部分需要在不同解析度瀏覽器下自適應寬度；而右側是側邊欄，這部分我們想做成乙個固定250px寬，預期效果圖如下：
使用負邊距建立自適應寬度的流體布局。
這是個典型的兩欄布局，我們來做乙個初步的架構
[task]頂部區域
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
底部區域
[/task]
這是在沒有樣式表的情況下頁面的顯示效果。下面我們給它加上基本的樣式表
[task]body,p,h1,h2,ul
#header
#footer
#mainer
#sidebar
[task]
定義mainer右邊距為-250px，使得右邊得以空出側邊欄的寬度，放置側邊欄。加上樣式表頁面請檢視測試頁面二。ok，現在我們看到左側的內容區域已經為側邊欄空出了相應的空間，使得側邊欄放置在了它應該出現的位置。
【去除重疊部分】
我們這時會發現，左側的文字內容部分卻和側邊欄有重疊。這時候我們需要另外的乙個div層，來將左側文字部分設定乙個足夠大的右邊距，使其不與側邊欄重疊。並將左側內容部分與側邊欄部分設定不同背景色，以示區分。
[task]
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
[/task]
增加的css
[task]#sidebar
#main
[/task]
【自適應高度】
這時候我們又發現了乙個問題：如果左側長度繼續加長，那麼，右側側邊欄的下部會出現空白。我們希望可以實現視覺上的左右兩欄自適應等高。
這裡我們可以給外層的mainer div設定乙個右對齊縱向重複的背靜，的寬度我們設定為250px，即同側邊欄寬度相同。
使用負邊距建立自適應寬度的流體布局 - 愛許彩的一切 - 愛 asp.net 2.0
css部分我們加上
[task]#mainer
[/task]
多數時候我們並不想設定全部寬度為瀏覽器的寬度，多數時候我們會設定小於螢幕寬度的百分比。這種情況下，我們可以在左側內容及右側側邊欄外再套乙個div層，並在側邊欄下加上乙個清除浮動的層，來達到我們的目的。這個時候我們的xhtml會是下面這個樣子。
[task]頂部區域
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
底部區域
[/task]
相應的css
.clearing
.mid
[/task]
【高階，三欄布局】
掌握了以上的方法，我們會發現製作乙個三欄的布局也是很簡單的！ok。下面我們把上面的例子變下，我們需要乙個三欄的布局，2側為固定寬度，中部為自適應寬度。這僅需要增加一點div。
[task]頂部區域
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
隨著越來越大的瀏覽器的出現及普及，**介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。採用百分比進行架構是 個不錯的主意。以往我們進行這類架構都是使用table**。但，其實使用很小的技術就可以建立出符合web標準化的自適應布局。
底部區域
[/task]
以及另外乙個背景
css部分增加：
[task]#main
#leftbar
#inmain
[/task]
使用負邊距建立自適應寬度的流體布局
合理使用負邊距技術，可以幫助我們建立很多有意思的布局，比如自適應瀏覽器寬度的流體布局。國外關於使用負邊距建立這類布局的技術文件，我看到的最早是04年 ryan brill 發表在 a list apart 上的 creating liquid layouts with negative margin...
使用負邊距建立自適應寬度的流體布局
隨著越來越大的瀏覽器的出現及普及，介面如何能滿足不同解析度瀏覽器使用者的瀏覽需求，逐漸成為前端開發工程師必須面對的問題。目前國內門戶很多都進行了改版，採用目前的主流 960px左右的寬度。我認為，對於不太複雜的 採用百分比進行架構是個不錯的主意。自適應布局的應用面還是蠻多的，比如論壇頁面 部落格頁面...
兩邊寬度固定，中間寬度自適應的幾種布局方法
我們在用css設定頁面布局的時，歸根結底是要讓頁面中的塊按照我們的需求進行排列組合。以下是幾種常用的中間自適應，兩邊固定的布局方法。核心 將父元素設定為彈性盒布局 display flex html css father son1 son2 son3父元素不設定定位，三列子元素都設定為左浮動。自適應...