Question

好的，我有这段代码：

<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的每个“组”应该具有相同的高度，基于最高的。

我真的希望我能正确解释这一点。任何帮助表示赞赏

Answer 1

您可以这样做（用以下内容替换您的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);

    });

});

Answer 2

你最好这样做：

<div class='layout' style='width: 500px;'>
  <div class='layout_frame' style='width: 300px;'></div>
  <div class='layout_frame' style='width: 200px;'></div>
</div>
<div class='layout' style='width: 500px;'>
  <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，并将它们全部设置为该高度。

Answer 3

目前，我的代码符合您的需求：我会根据您的意愿更新代码。

<html>
<head>
<title>frame layout</title>
<style  type="text/css"> 
div
{
    border: 1px solid black;
    height: 25px;
    float: left;
}
.layout
{
    border: 2px solid red;
}
</style>
</head>
<body>

<div class='layout' style='width: 500px;'>
  <div class='layout_frame' style='width: 300px;'>div1</div>
  <div class='layout_frame' style='width: 200px;'>div2</div>
  <div class='layout_frame' style='width: 100px;'>div3</div>
  <div class='layout_frame' style='width: 300px;'>div4</div>
  <div class='layout_frame' style='width: 100px;'>div5</div>
</div>
</body>
</html>

DIV等于浮动“行”内的高度

3 个答案: