gpt4 book ai didi

jquery - DIV 在 float "row"内等高

转载 作者:太空宇宙 更新时间:2023-11-03 20:24:29 25 4
gpt4 key购买 nike

好的,所以我有这段代码:

<div class='layout' style='width: 500px;'>
<div class='layout_frame' style='width: 300px;'></div>
<div class='layout_frame' style='width: 200px;'></div>
<div class='layout_frame' style='width: 100px;'></div>
<div class='layout_frame' style='width: 300px;'></div>
<div class='layout_frame' style='width: 100px;'></div>
</div>

好的,所以上面的每个 DIV 都向左浮动,所以我得到的是两“行”的 DIV,上面的行包含前两个、第二个和后三个 DIV,对吗?

好的,所以每个“layout_frame”都可以包含任何内容,因此它们的高度不同,但我希望行内的高度相等。所以前两个可能都应该是 800px 高,而后第三个应该是,例如 200px - 基于“行”中最高的 DIV。

所以我使用 jQuery position() 来找出哪些在同一行中,代码如下:

var rows = new Array();
$("div.layout_frame").each(function(){
var pos = $(this).offset().top;
var height = $(this).height();
if (height > rows[pos]){
rows.pos = height;
}
});

但这就是我所知道的。我将“pos”设置为“124”,前两个应该相等,后三个不相等。但是每个“组”的 DIVS 应该具有相同的高度,基于最高的。

我真的希望我解释正确。感谢任何帮助

最佳答案

您可以这样做(用以下代码替换您的 jQuery):

$(document).ready(function() {

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

$('div.layout_frame').each(function(index) {

if(currentRowStart != $(this).position().top) {

// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = $(this).position().top;
currentTallest = $(this).height();
rowDivs.push($(this));

} else {

// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($(this));
currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);

}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

});

});

关于jquery - DIV 在 float "row"内等高,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1503941/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com