仅等高的行，带有没有表格的 javascript答案

【问题标题】：Equal height only row with javascript without tables仅等高的行，带有没有表格的 javascript
【发布时间】：2018-04-19 04:01:32
【问题描述】：

所以我遇到了这个问题，我似乎无法弄清楚我应该如何使 lis 高度等于该行中的最高值。我让它工作了，但是它使所有 lis 的高度与最高的相同。这是我到目前为止的代码：https://codepen.io/benasl/pen/ooLrON?editors=1010

var max = -1;
var list = document.getElementsByTagName('li');

Array.prototype.forEach.call(list, function(child) {
  max = max > child.style.height ? max : child.offsetHeight;  
  console.log(child.offsetHeight);
});
Array.prototype.forEach.call(list, function(child) {
  child.style.height = max + 'px'; 
});

ul {
  list-style: none;
  padding: 0;
  width: 100%;
}

li {
  padding: 5px 10px;
  display:block;
  position:relative;
  height: 100%;
}

p {
  width: 100%;
}

<div class="row">
  <div class="col-sm-4">
    <ul>
      <li><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul> 
  </div>

  <div class="col-sm-4">
    <ul>
      <li><p>testtesttestt esttesttesttes ttesttesttestte sttesttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul> 
  </div>
  
  <div class="col-sm-4">
    <ul>
      <li><p>testtest testtes ttesttes ttesttesttestt esttestte assaas sasaas saassa sasasasaassa sttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul> 
  </div>
  
</div>

【问题讨论】：

必须是JS解决方案吗？只能是 CSS 吗？它使它们具有相同的高度，因为您没有按行对 li 进行分组。你有一个大桶，下面的所有li 都放在里面，所以它会找到最高的一个，然后把它们都做成这么大。
“仅在该行”是什么意思？您的示例中只有一行。另一个问题是选择器，它将选择文档中的所有 li。您是否尝试过使用行类作为选择器并遍历 li 的。
@dama ，里面有 3 个 ul，他想从这些 ul 中检索最高 li 的高度，并将最高值应用于每个 li。所以每一里的高度都是一样的。
@dama 有 3 个 ul，它们里面都有 4 个 lis，所以当所有三个 ul 在同一行时，所有行中的 lis 看起来就像它们在 4 个单独的行中。我想要做的是，如果所说的“行”中的一个 li 有更大的高度，则使该“行”中的所有 lis 更高

标签： javascript html css list styles

【解决方案1】：

改变

max = max > child.style.height ? max : child.offsetHeight;

到

max = max > child.offsetHeight ? max : child.offsetHeight;

child.style.height 是 set-only，你无法读取它。您可以使用window.getComputedStyle() 获取高度。

例如：

var el = document.getElementById("myList");
var height = window.getComputedStyle(el, null).getPropertyValue("height");

offsetHeight 为您提供带有填充和边框的高度。 (how to change the offsetHeight of a element using javascript?)

JSFiddle （点击运行查看结果）

【讨论】：