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; }

不幸的是，这有一个习惯，就是不要总是两个填充的列，因为在任何给定的行上，左入口和右入口将是不同的高度，并且会产生不良结果（包括由于差异而看起来非常有趣）< / p>

为了解决这个问题，我有一个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);
    }
});

全部谢谢！

将同一行上的所有DIVS设置为相同的高度...但每行不同

2 个答案: