如何让动态每行数量的列表项li匹配行内最高元素高度？

问题 #

现有代码可生成支持水平拖拽调整宽度的列表，但每行的<li>元素高度无法与该行最高元素保持一致。需保留列表可拖拽调整宽度、每行列表项数量随宽度动态变化的功能，同时让每行所有<li>匹配该行最高项的高度。

示例HTML代码 #

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra nunc vitae massa elementum ultricies a non ipsum.</li> 
  <li>Nunc porttitor pretium ex, in molestie lacus molestie eget.</li>
  <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </li>
  <li>Fusce faucibus lacus eu tellus interdum aliquet. Donec euismod nisi eu nisi dictum, a tincidunt sapien dictum.</li>
  <li>Fusce aliquet tempus ex quis tincidunt. Donec at varius enim. Nullam elementum laoreet lacus.</li>
  <li>Aenean id volutpat ipsum. Maecenas vulputate odio nec lectus vulputate, cursus volutpat nulla vehicula.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pharetra nunc vitae massa elementum ultricies a non ipsum.</li> 
  <li>Nunc porttitor pretium ex, in molestie lacus molestie eget.</li>
  <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </li>
  <li>Fusce faucibus lacus eu tellus interdum aliquet. Donec euismod nisi eu nisi dictum, a tincidunt sapien dictum.</li>
  <li>Fusce aliquet tempus ex quis tincidunt. Donec at varius enim. Nullam elementum laoreet lacus.</li>
  <li>Aenean id volutpat ipsum. Maecenas vulputate odio nec lectus vulputate, cursus volutpat nulla vehicula.</li>
</ul>

现有CSS代码 #

ul {
    overflow: scroll;
    list-style: none;
    resize: horizontal;
    height: 30vh;
    width: 80vw;
    padding: 0px;
}
li {
    background-color: grey;
    vertical-align: top;
    display: inline-block;
    width: 20vw;
    margin: 2px;
}

解决方案 #

方法1：Flexbox布局 #

将<ul>设置为flex容器并开启自动换行，Flexbox会自动让同一行子元素高度相等，同时保留拖拽调整宽度、动态换行的功能。

修改后的CSS：

ul {
    overflow: scroll;
    list-style: none;
    resize: horizontal;
    height: 30vh;
    width: 80vw;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* 替代margin，更稳定的间距控制 */
}
li {
    background-color: grey;
    flex: 0 0 calc(20vw - 2px); /* 计算宽度，抵消gap影响，保持原宽度 */
}

方法2：Grid布局 #

Grid布局通过自动填充列数实现动态换行，同时天然支持同行元素等高，适合需要更灵活布局的场景。

修改后的CSS：

ul {
    overflow: scroll;
    list-style: none;
    resize: horizontal;
    height: 30vh;
    width: 80vw;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20vw, 1fr)); /* 自动适配列数，最小宽度20vw */
    gap: 2px;
}
li {
    background-color: grey;
}

内容的提问来源于stack exchange，提问作者Jegor