0

次のような一連の DIV である Web ページがあります。

    <div class="cell upcoming">
        <img src="stills/press/press-logo-c2e2.png" class="general"><p class="one">Panelist - Chicago Comic & Entertainment Expo 2013</p>
        <p class="two">[Panel Name TBD]</p>
        <p class="three"><b>Panel Date/Location:</b> [TBD] on April 26-28, 2013 at C2E2 (Chicago, Illinois)</p>
        <p class="three"><b>Panelists:</b> [TBD]</p>
        <p class="three"><b>Panel Blurb:</b> [TBD]</p>
    </div>

    <div class="cell upcoming">
        <img src="stills/press/press-logo-wondercon-anaheim.png" class="general"><p class="one">Panelist - WonderCon 2013</p>
        <p class="two">[Panel Name TBD]</p>
        <p class="three"><b>Panel Date/Location:</b> [TBD] on March 29-31, 2013 at WonderCon (Anaheim, California)</p>
        <p class="three"><b>Panelists:</b> [TBD]</p>
        <p class="three"><b>Panel Blurb:</b> [TBD]</p>
    </div>

クラス「CELL」は 45% に設定されているため、2 列の「表」が形成されます。CSS は次のとおりです。

div.cell { position:relative; margin:2px; float:left; width:45%; text-align:justify; vertical-align:top; border:2px solid; padding:10px; border-radius:25px; -moz-border-radius:25px; }

残念ながら、これには常に 2 つの入力された列であるとは限らないという習慣があります。これは、特定の行の左のエントリと右のエントリが異なる高さになり、望ましくない結果が生じるためです (不一致のために本当におかしく見えることを含む)。

これに対抗するために、ページ上のすべてのセルを最大のセルに起因する高さに設定する JQUERY があります。

    var maxHeight = 0;
    $("div.cell").each(function(){
        maxHeight = Math.max(maxHeight, $(this).height());
    })
    $("div.cell").css("height",maxHeight);

ただし、すべてのセルが一致するように設定するのではなく、各行が一致することを本当に望んでいます。つまり、Web ページが 1 2、3 4、5 6 の場合。むしろ、1 と 2 を 1 と 2 の最高の高さにしたいと思います。3 と 4 は、3 と 4 の最高の高さになります。

これを行う方法はありますか？

ありがとう！

4

2 に答える 2

1

各行を div で囲み、次に

$('.row').each(function(){
  var maxHeight = 0;
  $(".cell", this).each(function(){
      maxHeight = Math.max(maxHeight, $(this).height());
  })
  $(".cell", this).css("height",maxHeight);
})

それを試してみてください。テストされていませんが

于 2013-02-01T02:26:53.080 に答える
0

私は学び続け、行を設定することなく問題を解決しました（新しいセルが追加されるたびにすべてを移動する必要があるため、サイトのメンテナンスが耐えられなくなりました）：

$("div.cell:nth-child(even)").each(function(){
    var cellheight = $(this).height();
    var nextheight = $(this).next("div.cell").height();
    if ( cellheight > nextheight ) {
        $(this).next("div.cell").height(cellheight)
    }
    else
    {
        $(this).height(nextheight);
    }
});

皆さんありがとう！

于 2013-02-07T23:54:04.303 に答える