</div>
CSS Code:
复制代码
<style type=”text/css” >
.contanier {
width: 960px;
margin: 0 auto;
}
#left {
width: 220px;
float: left;
margin-right: 20px;
background: green;
}
#content {
width: 480px;
float: left;
margin-right: 20px;
background: lime;
}
#right {
width: 220px;
float: right;
background: orange;
}
</style>
Javascript Code:
复制代码
<script type=”text/javascript”>
function matchColumns(classname){
var divs,contDivs,maxHeight,divHeight,d;
// get all <div> elements in the document
divs=document.getElementsByTagName(‘div’);
contDivs=[];
// initialize maximum height value
maxHeight=0;
// iterate over all <div> elements in the document
for(var i=0;i <divs.length;i++){
// make collection with <div> elements with class attribute ‘container’
if(new RegExp(“b” + classname + “b”).test(divs[i].className)){
d=divs[i];
contDivs[contDivs.length]=d;
// determine height for <div> element
if(d.offsetHeight){
divHeight=d.offsetHeight;
}
else if(d.style.pixelHeight){
divHeight=d.style.pixelHeight;
}
// calculate maximum height
maxHeight=Math.max(maxHeight,divHeight);
}
}
// assign maximum height value to all of container <div> elements
for(var i=0;i <contDivs.length;i++){
contDivs[i].style.height=maxHeight + “px”;
}
}
// Runs the script when page loads
window.onload=function(){
if(document.getElementsByTagName){
matchColumns(‘column’); // class=maincolumn
}
}
</script>
上面八大种方法就是我今天要跟大家一起分享的等高列的布局方法，他们之间更有千秋，希望能给需要的您带来一定的帮助。篇幅过长，慢慢看吧，上面的代码都是经过测试的，兼容各大浏览器，可以直接复制代码使用。
