Html 展开子项时列计数列表的重新排序

我使用

column count:3

将列表分成三列，并使用

display:inline block

设置每个列表项的样式，以使列表项的子项保持在同一列中。子项使用

max height

和

overflow:hidden

隐藏

我想通过设置

max height:none

展开并显示单击时的子项，但由于列计数尝试动态平衡所有列，因此列表会重新排序。我知道这就是列计数的目的

我想使用类似于

column count:3

的东西，但在页面加载后“锁定”它，这样它在展开子级时就不会重新排序。如果不将项目分为三个不同的列表，这可能吗？唯一的要求是它在IE11上工作

---

来说明这个问题

我假设列表项将是动态的（即数字将发生变化），因此您不能将它们硬编码为三个div？如果您使用JavaScript实现该功能，您可以在页面加载时以编程方式构建三个列表。谢谢您的想法。我想我可以用javascript将它们分开，但我有一个相当大的菜单（5个以上不同的条目，每个条目有三列），我想为每个条目建立三个列表是没有效率的。数字不会改变，总是3。我能想到的唯一解决方案是在后端将它们硬编码到不同的div中。我假设列表项是动态的（即数字会改变），所以你不能将它们硬编码到三个div中？如果你仍然使用JavaScript实现功能，你可以在页面加载时以编程方式构建三个列表。谢谢你的想法。我想我可以用javascript将它们分开，但我有一个相当大的菜单（5个以上不同的条目，每个条目有三列），我想为每个条目建立三个列表是没有效率的。数字不会改变，总是3。我能想到的唯一解决方案是在后端将它们硬编码到不同的div中。