0

好的，所以我有这个代码：

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

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

4

3 回答 3

4

您可以这样做（将您的 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);

    });

});
于 2011-01-25T15:24:47.137 回答
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 具有最大高度，并将它们全部设置为该高度。

于 2009-10-01T13:31:24.300 回答
0

目前，我有与您的需求相对应的代码：我将根据您的意愿更新代码。

<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>
于 2009-10-01T13:42:55.787 回答