Question

https://jsfiddle.net/16region/jmktr28g/31/

grand_row_count == shipping_tax_row_count

我希望它看起来像表格（我不能使用表格）。因此，每个道具的底边框都处于同一水平。我不确定为jquery选择哪种方法。

Answer 1

可能不是最漂亮的解决方案，但它可以起作用：https://jsfiddle.net/59p07t1u/

$(document).ready(function() {
  $.each($(`.prop-item`), function(i) {
    var h = 0;
    $.each($(`.prop-item:nth-child(${i})`), function() {
      h = $(this).height() > h ? $(this).height() : h;
    });
    $(`.prop-item:nth-child(${i})`).css("height", h);
  });
});

.wrapper {
  display: flex;
}

.item-block {
  width: 25%;
  padding: 0 20px;
}

.prop-item {
  padding: 10px 0;
  border-bottom: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="wrapper">
  <div class="item-block">
    <div class="props">
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">dolor sit amet,</div>
      <div class="prop-item"> consectetur adipisicing elit. Voluptatum f</div>
      <div class="prop-item">ugit magnam at, beatae ducimus, maiores, voluptas minus cumque quos est officiis a. Alias distinctio optio odio maxime nihil, deleniti in.</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">Lorem ipsum</div>
    </div>
  </div>

  <div class="item-block">
    <div class="props">
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">dolor sit amet,</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item"> consectetur adipisicing elit. Voluptatum f</div>
      <div class="prop-item">ugit magnam at, beatae ducimus, maiores, voluptas minus cumque quos est officiis a. Alias distinctio optio odio maxime nihil, deleni</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">Lorem ipsum</div>
    </div>
  </div>

  <div class="item-block">
    <div class="props">
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">dolor sit amet,</div>
      <div class="prop-item"> consectetur adipisicing elit. Voluptatum f</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">ugit magnam at, beatae ducimus, maiores, voluptas minus cumque quos est officiis a. Alias distinctio optio odio maxime nihil, delenit</div>

    </div>
  </div>

  <div class="item-block">
    <div class="props">
      <div class="prop-item">ugit magnam at, beatae ducimus, maiores, voluptas minus cumque quos est officiis a..</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">dolor sit amet,</div>
      <div class="prop-item"> consectetur adipisicing elit. Voluptatum f</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">Lorem ipsum</div>
      <div class="prop-item">Lorem ipsum</div>
    </div>
  </div>
</div>

Answer 2

您可以将孩子定位到特定的索引，如下所示：

.prop-item:nth-child(1) {
  height:70px;
}
.prop-item:nth-child(2) {
  height:60px;
}
.prop-item:nth-child(3) {
  height:80px;
}
.prop-item:nth-child(4) {
  height:90px;
}

我认为您真正想要的是使它们与具有最长内容的盒子的高度相同，但这将涉及JavaScript。

更新：

我试图用CSS Grid解决它，我想我创建了一个可以使用的解决方案。它要求您稍微弄平HTML，以便只有一个容器和子项，如下所示：

<div class="wrapper">
  <div class="item a-1">
  <div class="item a-2">
  <div class="item b-1">
  <div class="item b-2">
</div>

CSS非常简单：

.wrapper {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: auto;
}

我添加了标识符类，仅用于引用网格中的项目以进行表面样式设计。

这是我的JSFiddle：https://jsfiddle.net/stap8Lw7/

Answer 3

如果使用jQuery，则可以这样写：

var heights = [];
$('.props').each(function(){
  $(this).children().each(function(i){
    heights[i] = heights[i] || 0;
    heights[i] = Math.max(heights[i], this.clientHeight);
  });
  $(this).children().each(function(i){
    $(this).height(heights[i]);
  });
});

但是我强烈建议使用CSS来解决此问题；也许您可以使用flex来解决它。

使同级父母中所有具有相同索引的子div高度相同

3 个答案: