该方法依赖于JavaScript设置布局中的所有列的高度属性最高的塔的高度。在这个例子中，使用jQuery来均衡柱。
HTML代码如下：
<div class="container">
<div class="leftsidebar">第一列内容</div>
<div class="content">第二列内容<br />
<br />
heihei</div>
<div class="rightsidebar">第三列内容</div>
</div>
把它们放在彼此对齐它们在中心。
样式代码如下：
<style>
.container {
Width:900px;
Margin-left:auto;
Margin-right:auto;
}
.leftsidebar {
Float:left;
background-color:#9933FF;
Width:33%;
}
.content {
Float:left;
background-color:#339933;
Width:33%;
}
.rightsidebar {
Float:left;
background-color:#CC99FF;
Width:33%;
}
</style>
Jquery代码如下：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function setEqualHeight(columns) {
var tallestcolumn = 0;
columns.each(function() {
currentHeight = $(this).height();
if (currentHeight > tallestcolumn) {
tallestcolumn = currentHeight;
}
});
columns.height(tallestcolumn);
}
$(document).ready(function() {
setEqualHeight($(".container > div"));
});
</script>
你可以把JavaScript在单独的文件中并将它附加到您的HTML或使用内联但确保你也把jQuery的HTML网页，这个脚本在jQuery连接称为。
您需要更改代码，使柱的div元素的CSS类。在这个例子中是：.container > div
你可以描述列的<所有div >元素的CSS类代替上述。例如：你可以添加一个类的三个柱和使用，而不是简单的。
优势：
这种方法的优点是制作列没有CSS得到相同的高度。它也在各大浏览器的作品
如果您觉得本文的内容对您的学习有所帮助：
关键字：
解决列等高 JavaScript代码控制