作者令狐雨辰
mycyndi@gmail.com ，转载保留此行。
原文：
http://blog.xiaonei.com/GetEntry ... amp;owner=200196630
如果是中间三栏的排布形式，一般xhtml会这样写。
<div id='head'></head>
<div id='cont'>
<div id='left'></div>
<div id='middle></div>
<div id='right'></div>
</div>
<div id='foot'></div>
PS:我不喜欢写宽度自适应，自适应问题很多。做好用js获取浏览器宽度，然后动态写入不同宽度，这个就不在本文叙述了。
搜索引擎抓页面肯定有个顺序，如果另有一个页面是这样排布：
<div id='head'></head>
<div id='cont'>
<div id='middle></div>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='foot'></div>
作为主要内容的middle排列在上面，就更有利于排名。
可是显示效果不能改变，所以想出了如下解决方案。
1、将middle的position属性设置为absolute，将其抽出文档流，然后定位。
2、将left和right通过float进行左排和右排。
3、由于position:absolute后middle不能撑开父容器，所以必须用对cont进行调整。这里使用了mootools-release-1.11.js 框架。
代码如下：
var m_h = $('middle').getStyle('height').toInt();
var l_h = $('left').getStyle('height').toInt();
var r_h = $('right').getStyle('height').toInt();
var max_h = (l_h>r_h)?l_h:r_h;
max_h = (max_h>m_h)?max_h:m_h;
$('ttCont').setStyle('height',max_h+'px');
因为只有三个块，所以就用了两个条件赋值语句做了最大值。如果多，建议数组+循环。不过也不可能有多少吧。。。其中getStyle、toInt()、setStyle是mootools中的扩展。
最后注意js插入的位置：(在cont后面就行。)
<div id='head'></head>
<div id='cont'>
<div id='left'></div>
<div id='middle></div>
<div id='right'></div>
</div>
<script type="...">
var m_h = $('middle').getStyle('height').toInt();
var l_h = $('left').getStyle('height').toInt();
var r_h = $('right').getStyle('height').toInt();
var max_h = (l_h>r_h)?l_h:r_h;
max_h = (max_h>m_h)?max_h:m_h;
$('ttCont').setStyle('height',max_h+'px');
</script>
<div id='foot'></div>
