国外设计网站pinterest极速版/友链之家
等高布局目前最流行的方法就是集“隐藏容器溢出”、“正内补丁”和“负内补丁”于一身的方法，有木有不明觉厉的赶脚？抛开这些乱七八糟的专有名词，其实就是比较常规的布局而已。
方法1：“隐藏容器溢出”+“正内补丁”+“负内补丁”
实现方法
给需要等高布局的元素用padding-bottom来填充，然后用margin-bottom来消除padding-bottom带来的影响，然后给父元素定义overflow:hidden。
实现原理
等高布局实现的原理是用最大高度的元素来撑高其他元素。给父元素定义的overflow:hidden出发了BFC或hasLayout，因此浮动元素的高度也应被计算在父元素中，同时overflow:hidden把超出父元素的部分隐藏；由于父元素的高度被撑到最大高度的子元素的高度，则相对较矮的元素的元素则会用padding-bottom来补偿这部分的高度差。由于背景可以显示在padding中，而且border也跟随padding变化，于是成功完成了一个障眼法。 备注：padding-bottom和margin-bottom应设置得足够大。
代码：
HTML代码：
CSS代码：
.parent {
width: 100%;
overflow: hidden;
]
.left, right {
float: left;
padding-bottom:9999px;
margin-bottom:-9999px;
}
.left {
width: 300px;
height: 300px;
}
.right {
width: 200px;
height: 400px;
}
方法2：使用背景图障眼法
实现原理
实现制作一张带有不同栏背景色的背景图应用于父元素中，定义背景图的repeat-y:repeat，給父容器定义overflow:hidden，使父元素的高度等于其子元素的最大高度，最后由父元素撑开背景图，视觉上好像完成了等高布局。
方法3：用JavaScript代码控制两列等高
实现原理
用JavaScript检测出多列布局中最大高度的一列，然后其他较矮的列的高度均等于最大高度，并且父元素的高度也等于最大高度(只要定义父元素overflow:hidden即可)。
HTML代码：
CSS代码：
.parent {
width: 100%;
overflow: hidden;
]
.left, right {
float: left;
padding-bottom:9999px;
margin-bottom:-9999px;
}
.left {
width: 300px;
height: 300px;
}
.right {
width: 200px;
height: 400px;
}
.middle {
width: 100px;
height: 500px;
}
JavaScript代码：
// 获取等高布局元素组和其父元素
var parent = document.getElementById("parent");
var equalHeightElement = getClassName(parent, oClassName);
// 获取等高元素组的元素的高度值
var elementsHeight = [];
for(var i = 0, len = equalHeightElement.length; i
elementsHeight[i] = equalHeightElement[i].offsetHeight;
}
// 获取等高元素组中最大高度的元素的高度值
var maxHeight;
for(var i = 0, len = elementsHeight.length; i
maxHeight = elementsHeight[0];
maxHeight = maxHeight > elementsHeight[i] ? maxHeight : elementsHeight[i];
}
// 给每一个等高元素组的定义高度为最大高度maxHeight
for(var i = 0, len = equalHeightElement.length; i
equalHeightElement[i].offsetHeight = maxHeight;
}
// 获得obj节点下class属性值为oClassName的子元素集合；
// 参数：obj指父元素；oClassName为元素的class属性值；
function getClassName(obj, oClassName) {
// IE9+及标准浏览器可以直接使用getElementsByClassName()获取className元素集合
if(document.getElementsByClassName) {
return obj.getElementsByClassName(oClassName);
}else {
// classNameArr用来装载class属性值为oClassName的元素；
var classNameArr = [];
// 获取obj的直接子元素
var objChild = obj.children || obj.childNodes;
// 遍历obj元素，获取class属性值为oClassName的元素列表
for(var i = 0; i
// 判断obj子元素的class属性值中是否含有oClassName
if( hasClassName(objChild[i], oClassName) ) {
classNameArr.push(objChild[i]);
}
}
return classNameArr;
}
}
// 判断object元素的class属性值中是否含有objectClassName
function hasClassName(object, objectClassName) {
// 将class属性值由空格切分为数组
var classNameList = object.className.split(/\s+/);
// 判断
for(var j = 0; j
return classNameList[j] = objectClassName ? true : false;
}
}