使用jQuery为div设置等高

作者

我想用jQuery为div设置相等的高度。
所有div的内容量和默认高度可能不同。以下是我的html布局示例：

&lt；div class=“container”&gt；
&lt；div class=“column”&gt；这是&lt；br/&gt；最高的&lt；br/&gt；列&lt/部门&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt；div class=“column”&gt；两个&lt；br/&gt；线路&lt/部门&gt；
&lt/部门&gt；
&lt；div class=“container”&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt；div class=“column”&gt；两个&lt；br&gt；线路&lt/部门&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt/部门&gt；

我正在使用下一个jQuery函数设置高度：

$（文档）.ready（函数（）{
var-highestBox=0；
$（'.container.column'）。每个（函数（）{
如果（$（this）.height（）&gt；highestBox）{
highestBox=$（this）.height（）；
}
});    
$（'.container.column'）。高度（最高框）；
});

这很好，但在我的情况下不行，因为我希望所有的“列”只在一个“容器”中相等。这意味着在第一个容器中，所有框必须与第一个div一样高，但在第二个容器中，它们必须等于第二列

所以问题是——我应该如何修改jQuery以达到这个目的

谢谢大家!

回答您的具体问题

您的代码正在检查任何容器中的所有列，您需要做的是：

  • 循环遍历每个容器
    • 获取容器中每列的高度
    • 找到最高的
    • 在移动到下一列之前，将该高度应用于该容器中的每一列

注意：试着提供一个你的问题的例子，它使我们
为了更容易地帮助您了解问题，您可以查看
立即解决问题，并鼓励更快的响应

快速（粗略）示例

$（document）.ready（function（）{
//选择并循环要均衡的元素的容器元素
$（'.container'）。每个（函数（）{
//缓存最高的
var-highestBox=0；
//选择并循环要均衡的元素
$（'.column'，this）.each（函数（）{
//如果此框高于缓存的最高值，则将其存储
如果（$（this）.height（）&gt；highestBox）{
highestBox=$（this）.height（）；
}
});  
//把所有孩子的身高都定在最高的
$（'.column'，this）.height（最高框）；
}); 
});
.container{border 1px solid red；}
.column{border:1px纯蓝色；float:left；width:30%；text align:center；}
&lt；脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js“&gt&lt/脚本&gt；
&lt；div class=“container”&gt；
&lt；div class=“column”&gt；这是&lt；br/&gt；最高的&lt；br/&gt；列&lt/部门&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt；div class=“column”&gt；两个&lt；br/&gt；线路&lt/部门&gt；
&lt/部门&gt；
&lt；div class=“container”&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt；div class=“column”&gt；两个&lt；br&gt；线路&lt/部门&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt/部门&gt

图书馆

这是我发现的一个图书馆，如果你还想要的话，它看起来很有希望
智能均衡控制

http://brm.io/jquery-match-height-demo/

解决@Mem的问题

问题：$（document）.ready（）如果您有需要加载的图像，而这些图像又会修改容器的高度，那么它会起作用吗

图像加载后均衡高度

如果您正在加载图像，您会发现此解决方案并不总是有效。这是因为document.ready是在尽可能早的时间启动的，这意味着它不会等待加载外部资源（如图像）

当您的图像最终加载时，它们可能会在均衡脚本运行后扭曲其容器的高度，导致它看起来也不太有效

用图像解决等高问题

  1. 绑定到图像加载事件

这是最好的解决方案（在编写本文时），涉及绑定到img.load事件。你所要做的就是计算有多少个img（'img'）。长度，然后对于每个负载，-1，从该计数直到你达到零，然后启动均衡器

这里需要注意的是，如果图像在缓存中，则不会在所有浏览器中启动load。看看google/github，应该有一个解决方案脚本。在撰写本文时，我找到了Alexander Dickson的waitForImages（未经测试，这不是认可）

  1. 另一个更可靠的解决方案是window.load事件。这通常应该一直有效。但是，如果您签出文档，您会注意到在加载所有外部资源后会触发此事件。这意味着，如果您的图像已加载，但有一些javascript正在等待下载，则在下载完成之前不会启动

如果您异步加载大部分外部，并且能够巧妙地最小化、压缩和扩展负载，那么这种方法可能不会有任何问题，但是突然变慢的CDN（总是发生）可能会导致问题

在这两种情况下，您都可以采取愚蠢的方法并应用回退计时器。让均衡脚本在设定的几秒钟后自动运行，以防事件未触发或速度超出您的控制范围。这不是万无一失的，但事实上，如果你正确调整计时器，你会用这个回退让99%的访问者满意

几年后，这仍然在增加票数，现在FRUXBOX广泛支持这一点，除非您有特定的理由使用JS为<

，否则您可能需要考虑简单的CSS。

.container{
显示器：flex；
边框：2个红色虚线；
利润率：10px0；
}
.container&gt。列{
填充：10px；
}
.容器.填充宽度{
证明内容：拉伸；
}
.container.fill width&gt；。纵队{
弹性增长：1
}
.container&gt；。列：第n个子项（1）{
背景：黄色；
}
.container&gt；。列：第n个子项（2）{
背景：蓝色；
}
.container&gt；。列：第n个子项（3）{
背景：绿色；
}
&lt；div class=“container”&gt；
&lt；div class=“column”&gt；一些&lt；br&gt；文本&lt/部门&gt；
&lt；div class=“column”&gt；一些&lt；br&gt；更多&lt；br&gt；文本&lt；br&gt；这里&lt/部门&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt/部门&gt；
&lt；div class=“container”&gt；
&lt；div class=“column”&gt；一些&lt；br&gt；更多&lt；br&gt；甚至&lt；br&gt；更长的&lt；br&gt；文本&lt；br&gt；这里&lt/部门&gt；
&lt；div class=“column”&gt；一些&lt；br&gt；文本&lt/部门&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt/部门&gt；
&lt；div class=“容器填充宽度”&gt；
&lt；div class=“column”&gt；一些&lt；br&gt；更多&lt；br&gt；文本&lt；br&gt；这里&lt/部门&gt；
&lt；div class=“column”&gt；一些&lt；br&gt；文本&lt/部门&gt；
&lt；div class=“column”&gt；一行&lt/部门&gt；
&lt/部门&gt

相关文章：

  1. 如何使图元水平居中
  2. 使用CSS更改HTML5输入的占位符颜色
  3. 为什么HTML认为“chucknorris”是一种颜色？
  4. 在CSS中设置单元格填充和单元格间距？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with