<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+CSS让两栏或多栏布局高度自动一致</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
var m = Math.max(
$('.main').height(),
$('.sidebar').height(),
$('.sidebar2').height()
);
alert(m);
$('.content').height(m);
});
</script>
<style type="text/css">
div {
background-color: #eee;
display: block;
float: left;
margin-right: 10px;
padding: 10px;
width: 150px;
}
</style>
</head>
<body>
<div class="content main"> box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 box01 </div>
<div class="content sidebar">box02 box02 box02 box02 </div>
<div class="content sidebar2">box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03 box03</div>
</body>
</html>
?
?
