我想为jQuery的div设置相等的高度。所有div可能具有不同的内容量和不同的默认高度。这是我的html布局的示例:
<div class="container"> <div class="column">This is<br />the highest<br />column</div> <div class="column">One line</div> <div class="column">Two<br />lines</div> </div> <div class="container"> <div class="column">One line</div> <div class="column">Two<br>lines</div> <div class="column">One line</div> </div>
我使用下一个jQuery函数设置高度:
$(document).ready(function(){ var highestBox = 0; $('.container .column').each(function(){ if($(this).height() > highestBox){ highestBox = $(this).height(); } }); $('.container .column').height(highestBox); });
这很好用,但对我而言不是,因为我希望所有“列”仅在一个“容器”内相等。这意味着在第一个容器中,所有框必须与第一格一样高,但在第二个容器中,它们必须等于第二列。
所以问题是-我应该如何修改jQuery以达到此目的?
谢谢!
回答您的特定问题
您的代码正在检查任何容器中的所有列,您需要做的是:
注意:尝试为您的问题提供示例jsfiddle,它使我们能够更轻松地帮助您并理解问题,您可以立即查看有效的解决方案,并鼓励更快地做出响应。
快速(粗略)示例
$(document).ready(function(){ // Select and loop the container element of the elements you want to equalise $('.container').each(function(){ // Cache the highest var highestBox = 0; // Select and loop the elements you want to equalise $('.column', this).each(function(){ // If this box is higher than the cached highest then store it if($(this).height() > highestBox) { highestBox = $(this).height(); } }); // Set the height of all those children to whichever was highest $('.column',this).height(highestBox); }); }); .container { border 1px solid red; } .column { border: 1px solid blue; float:left; width: 30%; text-align:center; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="container"> <div class="column">This is<br />the highest<br />column</div> <div class="column">One line</div> <div class="column">Two<br />lines</div> </div> <div class="container"> <div class="column">One line</div> <div class="column">Two<br>lines</div> <div class="column">One line</div> </div>
图书馆! 我发现这是一个图书馆,如果您需要一些更聪明的均衡控件,这看起来很有希望 http://brm.io/jquery-match-height-demo/
图书馆!
我发现这是一个图书馆,如果您需要一些更聪明的均衡控件,这看起来很有希望
http://brm.io/jquery-match-height-demo/
解决@Mem的问题
问题 :$(document).ready()如果您有需要加载的图像而这些图像又会改变容器的高度,则可以使用吗?
$(document).ready()
加载图像后均衡高度
如果要加载图像,您会发现此解决方案并不总是有效。这是因为它document.ready是在最早的时间触发的,这意味着它不等待外部资源(例如图像)被加载。
document.ready
当图像最终加载时,运行均衡脚本后,它们可能会扭曲其容器的高度,从而导致其看起来也不太正常。
用图像求解高度均衡
这是最好的解决方案(在撰写本文时),并且涉及到绑定img.load事件。所有你需要做的是了解有多少IMG公司有一个数$('img').length,然后每个load,-1从数,直到你打零,那么火的均衡度。
img.load
$('img').length
load
-1
load如果图像在缓存中,则可能无法在所有浏览器中触发此处的警告。环顾google / github,那里应该有一个解决方案脚本。在撰写本文时,我发现了AlexanderDickson的waitForImages(未经测试,这不是背书)。
window.load
如果您异步加载大多数外部设备,并且巧妙地最小化,压缩和分散负载,则此方法可能不会出现任何问题,但是CDN突然变慢(一直发生)可能会引起问题。
在这两种情况下,您都可以采取愚蠢的方法并应用备用计时器。让均衡脚本在设置的几秒钟后自动运行,以防万一该事件不触发或某些事情变得缓慢而无法控制。这不是万无一失的方法,但实际上,如果您正确调整计时器,您将通过这种后备方式满足99%的访问者的需求。