如何平衡具有可变高度的无序列表

Question

我有一个高度可变的无序列表：

    <ul style="list-style-type: none;">
    <li style=" float:left"><div style="width:200px;">[divcontent]</div></li>
    <li style=" float:left"><div style="width:200px;">[divcontent]</div></li>
    etc
    </ul>

这些 div 包含可变长度的文本，因此高度会发生变化。当它们具有彩色背景的边框时，这会导致不规则的显示。更糟糕的是，当它们绕到下一行时，它们不会绕到左侧，而是倾向于粘在中间一些较长的 div 后面。

一行上的所有高度都应成为该行上最高项目的高度。因此，如果第 1 行的最高项目是 100 像素，则该行上的所有项目（li）都应变为 100 高。如果在下一行最高的项目是 150 像素，则所有项目都应达到该高度。

有没有办法做到这一点？

Answer 1

这可以使用Flexbox 完成，因为您可以看到一行中的所有项目将与该行中最高的项目具有相同的高度。

* {
  box-sizing: border-box;
}
ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
li {
  background: lightblue;
  margin: 10px;
}

 <ul style="list-style-type: none;">
  <li><div style="width:200px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quod illum deleniti, cum modi ipsa vitae. Eos, tempore vero porro sapiente facilis? Asperiores ullam, adipisci minima quisquam, hic pariatur nam.</div></li>
  <li><div style="width:150px;">[divcontent]</div></li>
   <li><div style="width:100px;">[divcontent]</div></li>
  <li><div style="width:300px;">[divcontent]</div></li>
   <li><div style="width:200px;">[divcontent]</div></li>
  <li><div style="width:100px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, porro.</div></li>
</ul>