首頁 >web前端 >css教學 >使用css負邊距建立自適應寬度的流體佈局的實作方法

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

不言原創: 2018-06-21 16:21:081529瀏覽

這篇文章主要介紹了關於使用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;
}

现在来看看我们的页面。

提示：您可以先修改部分代码再运行

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

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

相關文章