国外关于使用负边距创建这类布局的技术文档,我看到的最早是04年 Ryan Brill 发表在 A List Apart 上的 《Creating Liquid Layouts with Negative Margins》 (04年 - -!国内刚小部分人开始关注WEB标准化),本文亦可看做是对其的中文讲解版。随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。目前国内门户很多都进行了改版,采用目前的主流———960px左右的宽度。我认为,对于不太复杂的网站,采用百分比进行架构是个不错的主意。自适应布局的应用面还是蛮多的,比如论坛页面、博客页面等。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。这里需要的用到的技术关键点就一则:负边距。【简单的布局】OK。我们现在开始。假设现在需要给自己的博客重新制作前台,界面的设计已经完成,就差代码架构。我们希望博客的界面可以做到:左侧的主要部分是博客文章 内容,这部分需要在不同分辨率浏览器下自适应宽度;而右侧是侧边栏,这部分我们想做成一个固定250px宽,预期效果图如下:这是个典型的两栏布局,我们来做一个初步的架构
引用:
<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>
查看测试页面一,这是在没有样式表的情况下页面的显示效果。下面我们给它加上基本的样式表
<!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,使得右边得以空出侧边栏的宽度,放置侧边栏。加上样式表页面请查看测试页面二。OK,现在我们看到左侧的内容区域已经为侧边栏空出了相应的空间,使得侧边栏放置在了它应该出现的位置。
<!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>
提示:您可以先修改部分代码再运行【去除重叠部分】我们这时会发现,左侧的文字内容部分却和侧边栏有重叠。这时候我们需要另外的一个DIV层,来将左侧文字部分设置一个足够大的右边距,使其不与侧边栏重叠。并将左侧内容部分与侧边栏部分设置不同背景色,以示区分。
引用:
<div id=”mainer”><div id=”main”><h1>使用负边距创建自适应宽度的流体布局</h1><p>随着越来越大的浏览器的出现及普及,网站界面如何能满足不同分辨率浏览器使用者的浏览需求,逐渐成为前端开发工程师必须面对的问题。采 用百分比进行架构是个不错的主意。以往我们进行这类架构都是使用table表格。但,其实使用很小的技术就可以创建出符合WEB标准化的自适应布局。 </p></div></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) repeat-y right bottom;}
多数时候我们并不想设置全部宽度为浏览器的宽度,多数时候我们会设置小于屏幕宽度的百分比。这种情况下,我们可以在左侧内容及右侧侧边栏外再套一个DIV层,并在侧边栏下加上一个清除浮动的层,来达到我们的目的。这个时候我们的XHTML会是下面这个样子。
引用:
<div id=”header”>顶部区域</div> <div id=”wrapper” class=”mid”> <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 class=”clear”></div> </div> <div id=”footer”>底部区域</div>
相应的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>测试页面四</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">顶部区域</div>
<div id="wrapper" class="mid">
<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 class="clear"> </div>
</div>
<div id="footer" class="mid">底部区域</div>
</body>
</html>
提示:您可以先修改部分代码再运行Ryan Brill 在他的文章里说,外层的wrapper与里面的mainer两个DIV都应该设置背景 background,以便解决IE里的一个BUG。但我这里只设置了mainer DIV的背景,在IE6、IE7、FF里并未发现错误。可能他指的是IE5.x,这里忽略。【进阶,三栏布局】掌握了以上的方法,我们会发现制作一个三栏的布局也是很简单的!OK。下面我们把上面的例子变下,我们需要一个三栏的布局,2侧为固定宽度,中部为自适应宽度。这仅需要增加一点DIV。
引用:
<div id=”header” class=”mid”>顶部区域</div> <div id=”wrapper” class=”mid”> <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 class=”clear”> </div> </div> <div id=”footer” class=”mid”>底部区域</div>
以及另外一个背景图片CSS部分增加:
引用:
#main {margin-right: 250px;background: url(bj2.jpg) #616030 repeat-y left bottom;}#leftBar {float: left;width: 150px;}#inmain {margin-left: 150px;}
现在来看看我们的页面。
<!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) 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">顶部区域</div>
<div id="wrapper" class="mid">
<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 class="clear"> </div>
</div>
<div id="footer" class="mid">底部区域</div>
</body>
</html>
提示:您可以先修改部分代码再运行
推荐阅读
FireFox正常 IE错位的绝对定位元素
IE 一如既往地带来问题。真的,我觉得 IE 坚持自己的一套无所谓,不支持或者不完全支持标准也无所谓。但是,IE6 IE7 IE8 这三个版本都有各自不同的表现,实在是太让人难受了。
前两天碰到了这个奇怪的问题:
绝对>>>详细阅读
本文标题:负边距创建自适应宽度的流体布局的实现方法
地址:http://www.17bianji.com/kaifa2/CSS/16692.html
1/2 1