jQuery或JavaScript使多个容器中的DIV列具有相同的高度
我有很多容器div，每个容器div都包含其他列div，我尝试了一个JavaScript脚本，使半列div的大小保持在相同的高度。这已经起作用了，但这意味着页面上的所有其他半div都将调整到该高度。请参见下面的屏幕截图。半div具有相同的ID，但位于不同的容器中。是否有jQuery或JavaScript代码可以调整每个容器中div的高度 在屏幕截图中，顶行是一个容器，底行是另一个容器中的div。我希望底部的行div调整大小以匹配该单独容器中最高div的高度。但是我想训练几个容器，它们都可以调整页面内部div的大小 守则的一部分：jQuery或JavaScript使多个容器中的DIV列具有相同的高度,javascript,jquery,Javascript,Jquery,我有很多容器div，每个容器div都包含其他列div，我尝试了一个JavaScript脚本，使半列div的大小保持在相同的高度。这已经起作用了，但这意味着页面上的所有其他半div都将调整到该高度。请参见下面的屏幕截图。半div具有相同的ID，但位于不同的容器中。是否有jQuery或JavaScript代码可以调整每个容器中div的高度 在屏幕截图中，顶行是一个容器，底行是另一个容器中的div。我希望底部的行div调整大小以匹配该单独容器中最高div的高度。但是我想训练几个容器，它们都可以调整页面
<style>
#page{width:85%; text-align:center;margin:auto;}
#row{width:100%;background:yellow;margin-bottom:1%;}
#container{height: auto;display: table;float:left;}
#header{width:100%;background-color: rgb(0, 143, 213); height:50px;}
#full{width:99%;margin:0.5%;background-color:skyblue;}
.half{width:48%; margin:0.5%;padding:0.5%;float:left; background-color:#1589FF;display: table-cell;}
#third{width:32.333%; float:left; margin:0.5%; background-color:skyblue;}
#th2{width:65.66%; float:left; margin:0.5%; background-color:skyblue;}
#quarter{width:23%; margin:0.5%;padding:0.5%; float:left; background-color:blue;height:100px}
</style>
<script type='text/javascript'>
$(window).load(function(){
$(window).resize( function() {
var $column = $('.column'),
maxHeight = 0;
$column.each( function() {
$(this).removeAttr('style');
if($(this).height() > maxHeight) {
maxHeight = $(this).height();
}
});
$column.height(maxHeight);
}).trigger('resize');
});
</script>
</head>
<body>
<div id="full">Menu</div>
<div id="th2">2/3</div><div id="third">Third</div>
<div id="container">
<div class="half column"><h1>About</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</div>
<div class="half column"><h1>News</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.
</div>
</div>
<div id="container2">
<div class="half column">Half<br>more info</div><div id="quarter">Quarter</div><div id="quarter">Quarter</div>
</div>
</div>
#页面{宽度：85%；文本对齐：居中；边距：自动；}
#行{宽度：100%；背景：黄色；边距底部：1%；}
#容器{高度：自动；显示：表格；浮动：左；}
#标题{宽度：100%；背景颜色：rgb（0，143，213）；高度：50px；}
#全{宽度：99%；边距：0.5%；背景色：天蓝色；}
.half{宽度：48%；边距：0.5%；填充：0.5%；浮动：左侧；背景色：#1589FF；显示：表格单元格；}
#第三{宽度：32.333%；浮动：左侧；边距：0.5%；背景色：天蓝色；}
#th2{宽度：65.66%；浮动：左侧；边距：0.5%；背景色：天蓝色；}
#四分之一{宽度：23%；边距：0.5%；填充：0.5%；浮动：左侧；背景色：蓝色；高度：100px}
$（窗口）。加载（函数（）{
$（窗口）。调整大小（函数（）{
变量$column=$（'.column'），
最大高度=0；
$column.each（函数（）{
$（this.removeAttr（'style'）；
if（$（this）.height（）>maxHeight）{
maxHeight=$（this.height（）；
}
});
$column.height（最大高度）；
}).trigger（'resize'）；
});
菜单
2/3第三
大约Lorem ipsum dolor sit amet，是一位杰出的领导者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。
Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。临时牧师。乌拉姆·科珀（Etiam ullamcorper lorem dapibus velit Succipit ultrices）。在最新的医疗设备中使用Proin。
新闻Lorem ipsum dolor sit amet，奉献精英。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。在semper Consequeat est，eu porta velit mollis nec。
Lorem ipsum dolor sit amet，是一位杰出的献身者。非临时性非临时性非临时性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性非永久性。前车辆高度。他是自由主义者，他是自由主义者。
一半以上
四分之一季度
$('.container').each(function(index, elem){
var maxHeight;
$(elem).find('.column').each(function(index, elem) {
var height = $(elem).height();
if(height > maxHeight)
maxHeight = height;
});
$(elem).find('.column').height(maxHeight);
});
祝你好运 如果您不想为每个容器写一行并循环其列，那么问题的一个解决方案是在id为containerX的元素上将class更改为container。比如：
$('.container').each(function(index, elem){
var maxHeight;
$(elem).find('.column').each(function(index, elem) {
var height = $(elem).height();
if(height > maxHeight)
maxHeight = height;
});
$(elem).find('.column').height(maxHeight);
});
祝你好运 虽然我得到了回答，但我还有另一种jQuery风格：
(function(l){
var mh=0, ah;
$(l).each(function(i, e){
ah = $(e).height();
mh = (ah > mh)? ah: mh;
}).height(mh);
})('ul.list li')
通过更改选择器，它是可重用的尽管已回答，但我为您提供了另一种jQuery风格：
(function(l){
var mh=0, ah;
$(l).each(function(i, e){
ah = $(e).height();
mh = (ah > mh)? ah: mh;
}).height(mh);
})('ul.list li')
通过更改选择器，它可以重复使用请至少向我们提供您的HTML。您知道，html元素应该具有唯一的ID，并且根据标准，该ID在每页上的显示次数不应超过一次。谢谢，我现在已经添加了代码。谢谢，但我仍然不确定您想要实现什么，在您的代码示例中，两个半列都在同一个容器中。两个半柱的高度应该相同吗？要将哪些其他图元调整为相同高度？其他列是否也在容器（行）中？在底部的代码中，我有一个新的容器2。我希望该容器中的“半”div仅与该容器中任何div的高度相匹配。当前javascript将页面上所有半div的大小调整为相同大小。谢谢。嗯，我想你不用JavaScript就可以做到这一点。使用height 100%并在父容器上放置clearfix类，父容器将拉伸到最高子容器的高度。然后定义clearfix类以使其清晰：两者都是。请至少向我们提供您的HTML。您知道，html元素应该具有唯一的ID，并且根据标准，该ID在每页上的显示次数不应超过一次。谢谢，我现在已经添加了代码。谢谢，但我仍然不确定您想要实现什么，在您的代码示例中，两个半列都在同一个容器中。两个半柱的高度应该相同吗？要将哪些其他图元调整为相同高度？其他列是否也在容器（行）中？在底部的代码中，我有一个新的容器2。我希望该容器中的“半”div仅与该容器中任何div的高度相匹配。当前的javascript resi