將同一行上的所有DIVS設置為相同的高度…，但每一行都不同

Question

我有一個網頁，其中包含一系列DIV，例如：

    <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％，因此它形成了兩列“表”。 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; }

不幸的是，這有一個習慣，並非總是兩個填充的列，因為在任何給定的行上，左輸入項和右輸入項將具有不同的高度，並且會產生不良的結果（包括由於視差而看起來很可笑）

為了解決這個問題，我有一個JQUERY，它將頁面上的每個單元格設置為最大單元格的高度：

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

但是，我真正想要的是讓每一行都匹配，而不是將每個單元格都設置為匹配。 換句話說，如果網頁是1 2、3 4、5 6； 我寧願1和2是1和2的最高高度。3和4只是3和4的最高高度。等等。

有沒有辦法做到這一點？

謝謝！

Answer 1

然后將每行包裝在div中

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

試試看 雖然沒有測試

Answer 2

我一直在學習，並且無需設置行就解決了這個問題（由於每次添加新單元格時都需要轉移所有內容，因此使站點維護變得難以忍受）：

$("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);
    }
});

謝謝大家！