0

我有一个网页，它是一系列 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 中的最高点。等等。

有没有办法做到这一点？

谢谢！

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 回答