下面是这个实现的代码,有兴趣的朋友可以COPY回去试试，也欢迎留言交流。 BTW：这次和 刘韧,KESO 改版DONEWS.COM，获益菲浅，他们才是真正懂用户需求， 懂网站 的人。
<!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>
<style> body{font-size:12px;} div{color:#fff}
#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>
<div id=m> <div id=middle>
中栏<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日
</div> </div>
<div id=left>左栏</div> <div id=right>右栏<br> </div> <div id=footer>网页底部</div> </div>
<script language=javascript> document.getElementById(left).style.height=document.getElementById(middle).scrollHeight+px document.getElementById(right).style.height=document.getElementById(middle).scrollHeight+px </script> </body> </HTML>
【左中右3栏最先显示中栏内容的方法】相关文章：
★ 在ie7下css居中样式text-align:center;偏左问题解决方法