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

    <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行的最高项目为100px,则该行上的所有项目(li)都应变为100高。如果在下一行上,最高项目为150px,则所有项目都应达到该高度。

有没有办法做到这一点?

最佳答案

可以使用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>

09-10 03:14
查看更多