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

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

文章来源：本站作者：佚名更新时间：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>

设为首页 | 加入收藏 | 返回首页 | 联系我们 | 技术支持