页面三个DIV,一个按钮。
点击按钮后,三个DIV的高度调整为相同。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40px;
float: left;
}
input {
clear: left
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" value="equalize div heights">
<div style="background:red; height: 40px; "></div>
<div style="background:green; height: 70px;"></div>
<div style="background:blue; height: 50px; "></div>
<script>
$.fn.equalizeHeights = function() {
var maxHeight = this.map(function(i, e) {
return $(e).height();
}).get();
return this.height(Math.max.apply(this, maxHeight));
};
$('input').click(function() {
$('div').equalizeHeights();
});
</script>
</body>
</html>