下面是這個實現的代碼,有興趣的朋友可以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>