首 页 | 政协章程 | 政协简介 | 工作动态 | 文件规章 | 公告公示 | 机构设置 | 灵山文史 | 社情民意 | 委员风采 | 视察调研 | 提案工作 | 主席信箱 | 网站留言 | 联系我们

经典布局3列1行高度自适应相等的方法
文章来源：本站 作者：佚名 更新时间：2008-8-6
网页设计中，布局起着至关重要的作用，一个好的布局可以让你接下来的工作得心应手，省去好多时间。传统的网页布局往往都是三列式－左中右结构，如何能让三列永远都能保持同一高度，或者说左右两列始终跟随中列的变化而变化呢？ 这个问题，在Table中很好解决：只要插入一个1行3列的表格就可以；如何在Div中很好的处理呢？以前往往都是给三列固定同一高度，写死在div中。但这样有一个问题就是只要网页内容有更新，就要手动调整一次各列的高度，很是麻烦…… 今天终于找到一种很好的方法，个人认为很不错，分享与大家： <style> <!-- #main1{ height:10px; width:200px; font-size:12px; background:#0000FF; margin-top:10px; } #main2{ height:10px; width:200px; font-size:12px; background:#ff0000; margin-top:10px; } #main3 { height:10px; width:200px; font-size:12px; background:#000000; margin-top:10px; } --> </style> <script language=javascript> function resetDiv(){ var m1=document.getElementById("main1"); var m2=document.getElementById("main2"); var m3=document.getElementById("main3"); if(m1.offsetHeight>m2.offsetHeight || m3.offsetHeight>m2.offsetHeight ){ m2.style.pixelHeight=m1.offsetHeight; m2.style.pixelHeight=m3.offsetHeight; } else{ m1.style.pixelHeight=m2.offsetHeight; m3.style.pixelHeight=m2.offsetHeight; } } </script> <body onload="resetDiv()"> <div style="float:left;"> <div id=main1></div> </div> <div style="float:left;"> <div id=main2><br />中栏自由改变高度<br />左右两栏跟着相应变化<br /><br /><br /><br /></div> </div> <div style="float:left;"> <div id="main3"></div> </div> </body>

设为首页 | 加入收藏 | 返回首页 | 联系我们 | 技术支持
(C)2008 版权所有：中国人民政治协商会议达县委员会 未经许可不得复制、转载 地址：四川达县 南外四大班子综合楼 Tel:0818-5123558 E-mail:daxianzx@163.com 技术支持： 达州科创网络文化传媒有限公司 （浏览本网站，建议将分辨率设置为1024*768 以获得最佳的访问效果）