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 の 2 つの「行」が得られます。上の行には最初の 2 つが含まれ、2 つ目は後の 3 つの DIV ですよね?

各「layout_frame」には任意のコンテンツを含めることができるため、高さが異なりますが、行内で高さが等しくなるようにします。したがって、最初の 2 つはおそらく両方とも 800 ピクセルの高さにする必要があり、後者の 3 番目は、たとえば、「行」の最も高い DIV に基づいて 200 ピクセルにする必要があります。

したがって、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」に設定しています。これは、最後の 3 つではなく、最初の 2 つが等しくなるはずです。ただし、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 に答える