利用负边距技术制作自适应宽度布局的网页

摘要：合理使用负边距技术，可以帮助我们创建很多有意思的布局，比如自适应浏览器宽度的流体布局。国外关于使用负边距创建这类布局的技术文档，我看到的最早...

合理使用负边距技术，可以帮助我们创建很多有意思的布局，比如自适应浏览器宽度的流体布局。国外关于使用负边距创建这类布局的技术文档，我看到的最早是04年 Ryan Brill 发表在 A List Apart 上的《Creating Liquid Layouts with Negative Margins》（04年 - -！国内刚小部分人开始关注WEB标准化），本文亦可看做是对其的中文翻译版。

随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。目前国内门户很多都进行了改版，采用目前的主流--960px左右的宽度。

我认为，对于不太复杂的网站，采用百分比进行架构是个不错的主意。自适应布局的应用面还是蛮多的，比如论坛页面、博客页面等。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。

这里需要的用到的技术关键点就一则：负边距。

【简单的布局】

OK。我们现在开始。假设现在需要给自己的博客重新制作前台，界面的设计已经完成，就差代码架构。我们希望博客的界面可以做到：左侧的主要部分是博客文章内容，这部分需要在不同分辨率浏览器下自适应宽度；而右侧是侧边栏，这部分我们想做成一个固定250px宽，预期效果图如下：

利用负边距技术制作自适应宽度布局的网页1

这是个典型的两栏布局，我们来做一个初步的架构

<h1>使用负边距创建自适应宽度的流体布局</h1>

<p> 随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p>

</div>

<ul>

<li>最新文章一</li>

<li>最新文章二</li>

<li>最新文章三</li>

</ul>

</div>

查看测试页面一：

<!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>测试页面一</title> </head> <body> <div id="header">顶部区域</div> <div id="mainer"> <h1>使用负边距创建自适应宽度的流体布局</h1> <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p> </div> <div id="sideBar"> <h2>最新文章</h2> <ul> <li>最新文章一</li> <li>最新文章二</li> <li>最新文章三</li> </ul> </div> <div id="footer">底部区域</div> </body> </html>

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

这是在没有样式表的情况下页面的显示效果。下面我们给它加上基本的样式表

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，使得右边得以空出侧边栏的宽度，放置侧边栏。加上样式表页面请查看

测试页面二。

<!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>测试页面二</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;} #sideBar {float: right;width: 250px;} </style> </head> <body> <div id="header">顶部区域</div> <div id="mainer"> <h1>使用负边距创建自适应宽度的流体布局</h1> <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p> </div> <div id="sideBar"> <h2>最新文章</h2> <ul> <li>最新文章一</li> <li>最新文章二</li> <li>最新文章三</li> </ul> </div> <div id="footer">底部区域</div> </body> </html>

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

OK，现在我们看到左侧的内容区域已经为侧边栏空出了相应的空间，使得侧边栏放置在了它应该出现的位置。

【去除重叠部分】

我们这时会发现，左侧的文字内容部分却和侧边栏有重叠。这时候我们需要另外的一个DIV层，来将左侧文字部分设置一个足够大的右边距，使其不与侧边栏重叠。并将左侧内容部分与侧边栏部分设置不同背景色，以示区分。

<h1>使用负边距创建自适应宽度的流体布局</h1>

<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p>

</div>

增加的CSS

#sideBar {

color: #FFF;

background-color: #36361A;

}

#main {

margin-right: 250px;

background-color: #616030;

}

<!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>测试页面三</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; } #sideBar { float: right; width: 250px; color: #FFF; background-color: #36361A; } #main { margin-right: 250px; background-color: #616030; } </style> </head> <body> <div id="header">顶部区域</div> <div id="mainer"> <div id="main"> <h1>使用负边距创建自适应宽度的流体布局</h1> <p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p> </div> </div> <div id="sideBar"> <h2>最新文章</h2> <ul> <li>最新文章一</li> <li>最新文章二</li> <li>最新文章三</li> </ul> </div> <div id="footer">底部区域</div> </body> </html>

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

【自适应高度】

这时候我们又发现了一个问题：如果左侧长度继续加长，那么，右侧侧边栏的下部会出现空白。我们希望可以实现视觉上的左右两栏自适应等高。

这里我们可以给外层的mainer DIV设置一个右对齐纵向重复的背静图片，图片的宽度我们设置为250px，即同侧边栏宽度相同。

CSS部分我们加上

#mainer {

background: url(bj1.jpg"runcode8"><!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>测试页面四</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"header">顶部区域</div><div id="wrapper"><div id="mainer"><div id="main"><h1>使用负边距创建自适应宽度的流体布局</h1><p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p><p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p><p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p><p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p></div></div><div id="sideBar"><h2>最新文章</h2><ul><li>最新文章一</li><li>最新文章二</li><li>最新文章三</li></ul></div><div> </div></div><div id="footer">底部区域</div></body></html>

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

Ryan Brill 在他的文章里说，外层的wrapper与里面的mainer两个DIV都应该设置背景 background，以便解决IE里的一个BUG。但我这里只设置了mainer DIV的背景，在IE6、IE7、FF里并未发现错误。可能他指的是IE5.x，这里忽略。

【进阶，三栏布局】

掌握了以上的方法，我们会发现制作一个三栏的布局也是很简单的！OK。下面我们把上面的例子变下，我们需要一个三栏的布局，2侧为固定宽度，中部为自适应宽度。这仅需要增加一点DIV。

<ul>

</ul>

</div>

<h1>使用负边距创建自适应宽度的流体布局</h1>

<p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p>

</div>

<ul>

<li>最新文章一</li>

<li>最新文章二</li>

<li>最新文章三</li>

</ul>

</div>

</div>

以及另外一个背景图片

CSS部分增加：

#main {

margin-right: 250px;

background: url(bj2.jpg"runcode9"><!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>测试页面五</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"header">顶部区域</div><div id="wrapper"><div id="mainer"><div id="main"><div id="leftBar"><h2>栏目标题</h2><ul><li>文章标题</li><li>文章标题</li><li>文章标题</li></ul></div><div id="inmain"><h1>使用负边距创建自适应宽度的流体布局</h1><p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p><p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p><p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p><p>随着越来越大的浏览器的出现及普及，网站界面如何能满足不同分辨率浏览器使用者的浏览需求，逐渐成为前端开发工程师必须面对的问题。采用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但，其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。</p></div></div></div><div id="sideBar"><h2>最新文章</h2><ul><li>最新文章一</li><li>最新文章二</li><li>最新文章三</li></ul></div><div> </div></div><div id="footer">底部区域</div></body></html>

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

OK，大功告成~！！