网页布局---中部先显示，左右高度随中部高度变化

最新推荐文章于 2024-09-14 18:52:56 发布

gaocctv

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量797

点赞数

文章标签： div 希捷 xhtml javascript float html

本文链接：https://blog.csdn.net/gaocctv/article/details/3128073

版权

以前在布局网页时，尤其是布局三栏式格式时，我总是写成左中右的格式，程序在执行时从上往下读，显示的顺序也就成了先左，其次中，再次显示右。而且我在设置左中右栏宽度的时候喜欢给各固定宽度或者百分比。今天从网上看到了一个很好的方法，在这里记录下来。

先显示中部的内容，对于一般的网页，中部内容是最重要的，也是用户比较关注的，而左右两侧一般是导航之类的信息。那么怎样才能让中部内容先显示呢？布局的时候将中部的div写在左右div的上部，因为程序是从上到下按顺序执行的，所以会先解释执行z中部的布局格式，并且给中部设定一个Padding-left:150px的填充，以此给左侧页面留出空间。中部采用绝对定位布局，当内容增多时，中部高度也随着延伸，但是左右两侧并不会随之延伸，解决方法是采用JS使左右两侧的高度和随中部高度变化而变化。下面把原代码写在下面，以备使用：

<!DOCTYPE html PUBLIC "-//W。3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="designed by dodo at donews.com" />
<title>WEB标准网站设计实例：左中右3栏布局中最先显示中栏内容的方法</title>
</head>

#m{padding-left:150px}
#middle{position:absolute;
background:red;width:468px;
margin-right: auto;
margin-left: auto;
padding: 0px;
}

#left{float:left;background:green;width:140px;height:30px}
#right{float:right;background:blue;width:140px}

#all{width:770px;
margin-right: auto;
margin-left: auto;
padding: 0px;
color: #000;
background:#ffa200;}
#footer{clear:both;background:#808080;color:#fff}
</style>
<body>
<div id="all">

中栏<br />
·IT人的出路系列思考（三）: 提升学习能力与可持 .. [陈国华]   11日
·alexa上，黑客的下一个目标是谁？ [阮颖]   11日
·IT人的出路系列思考（二）：思维创新战略与谋定 .. [陈国华]   11日
·IT人的出路系列思考（一）：项目与打工 [陈国华]   11日
·希捷加入后的新一代笔记本选购规则 [新华美通]   11日
·木子美：挣扎出历史的海面透一口气 [周晶波]   11日
·首家推出出租房源、二手房源的RSS订阅服务 [鳖兔鳖]   11日
·TOM 在线公布二○○五年第一季度之业绩报告 [新华美通]   11日
·黄华：我们有必要开会吗？ [黄华]   11日
·IT人的出路系列思考（三）: 提升学习能力与可持 .. [陈国华]   11日
·alexa上，黑客的下一个目标是谁？ [阮颖]   11日
·IT人的出路系列思考（二）：思维创新战略与谋定 .. [陈国华]   11日
·IT人的出路系列思考（一）：项目与打工 [陈国华]   11日
·希捷加入后的新一代笔记本选购规则 [新华美通]   11日
·木子美：挣扎出历史的海面透一口气 [周晶波]   11日
·首家推出出租房源、二手房源的RSS订阅服务 [鳖兔鳖]   11日
·TOM 在线公布二○○五年第一季度之业绩报告 [新华美通]   11日
·黄华：我们有必要开会吗？ [黄华]   11日