左中右三种页面布局样式备忘

　　网页布局中经常会碰到一列式、二列式和三列式布局的需求。大多数熟练的好手都固定三个DIV的宽度再加浮动（float）实现三列式布局。但是三列式三个都固定宽度其输出速度肯定是快，但这种布局弊端是显而易见的。

三列式（中间自适应宽度）

　　三列式（中间自适应宽度）这种布局在网页设计中较为常见。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">  </style> </head> <body> <h3>.container 的宽度为650px时的效果：</h3> <div class="container"> <div class="right"> <h4>网页右侧内容</h4> 此 div 为网页右侧的内容，由于此元素是浮动的（float:right;），因此必须指定宽度。 </div> <div class="left"> <h4>网页左侧内容</h4> 此 div 为网页左侧的内容，由于此元素是浮动的（float:left;），因此必须指定宽度。 </div> <div class="main"> <h4>网页中间内容</h4> 此 div 为网页中间的内容，考虑到中间的宽度将随着整体的缩放而变化，因此不固定宽度，改为缩进值（margin:0px 155px;）来实现）。 </div> <div class="clear"></div> 此 div 为中部整体的内容，这里宽度我们设置为650px（width:650px;），背景色设置为灰色（background:#f5f5f5;）。 </div> </div> <h3>.container 的宽度为100%时的效果：</h3> <div class="container" style="width:100%;"> <div class="right"> <h4>网页右侧内容</h4> 此 div 为网页右侧的内容，由于此元素是浮动的（float:right;），因此必须指定宽度。 </div> <div class="left"> <h4>网页左侧内容</h4> 此 div 为网页左侧的内容，由于此元素是浮动的（float:left;），因此必须指定宽度。 </div> <div class="main"> <h4>网页中间内容</h4> 此 div 为网页中间的内容，考虑到中间的宽度将随着整体的缩放而变化，因此不固定宽度，改为缩进值（margin:0px 155px;）来实现。 </div> <div class="clear"></div> 此 div 为中部整体的内容，这里宽度我们设置为100%（width:<span class="container" style="width:100%;">100</span>%;），背景色设置为灰色（background:#f5f5f5;）。 </div> </div> <h3>有什么收获了吗？</h3> </body> </html>
提示：您可以先修改部分代码再运行

　　分析一下：

　　由于网页左右侧的区块元素是浮动的（float:right;、float:left;），因此必须指定宽度，在这里将其宽度设置为 150px（width:150px;）。

　　网页中间的区块元素，考虑到中间的宽度将随着整体的缩放而变化，因此不固定宽度，改为缩进值（margin:0px 155px;）来实现。当container的宽度为固定时，左右二侧分别居于网页两侧，中间内容区块与两者的间距为5px；若改一下整体宽度，将container的宽度改为100%，则在上例中中间内容区块将自动延伸撑开，并与两者的间距为5px，实现了三列式（中间自适应宽度）的想法。

Home << 1 2 3 >> End

作者：yahu 发布时间：2008年09月23日点击数：【收藏】【打印文章】

上一篇：不同浏览器 Hack 的CSS定义　　下一篇：中部自适应浏览器界面的三行式布局

动易雅虎

推荐阅读

左中右三种页面布局样式备忘

作者：yahu 发布时间：2008年09月23日点击数：【收藏】【打印文章】

查看本文的所有评论 >>网友评论