经典布局3列1行高度自适应相等的方法

经典布局3列1行高度自适应相等的方法

阅读 101 次更新时间：2008/8/6

网页设计中，布局起着至关重要的作用，一个好的布局可以让你接下来的工作得心应手，省去好多时间。传统的网页布局往往都是三列式－左中右结构，如何能让三列永远都能保持同一高度，或者说左右两列始终跟随中列的变化而变化呢？

这个问题，在Table中很好解决：只要插入一个1行3列的表格就可以；如何在Div中很好的处理呢？以前往往都是给三列固定同一高度，写死在div中。但这样有一个问题就是只要网页内容有更新，就要手动调整一次各列的高度，很是麻烦……

今天终于找到一种很好的方法，个人认为很不错，分享与大家：

<style>

</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>

友情链接，虚位以待：

3vidc零成本网赚明月何时伴我还青果网世纪数据网美女世界阿星个人网源码共享 DJ娱乐在线博富网孙列个人网创造天地暗讽工作室计网一班清风轩 80后天地博富雅轩乐帆易搜大帅府网宁静致远寒梅娱乐网艺馨缘网站秋荷网站世外桃源铭凯个人网 NET应用软件李煜专题网客客圈学习殿堂晴儿小屋大文化博客蓝枫叶网爱闲网 114博客大全银沙主页淘商学院木子网站葬雪博客雨荷网站怡水云间江先礼空间陶士涵网秦川悠然动画乡草文学

网站制作者：南方闲人工作室 | 请您留言