html - Css 将元素数量均匀分布在 2 列中

Question

我在下面的 li 中有内容，可以通过点击手风琴来消耗：

<ul>
<li>Accordion item 1</li>
<li>Accordion item 2</li>
<li>Accordion item 3</li>
<li>Accordion item 4</li>
<li>Accordion item 5</li>
</ul>

有了这个 CSS

ul {
columns: 2;
}
li {
break-inside: avoid;
}

如果所有项目都折叠，则 columns: 2 工作正常。

然而，一旦一个项目被消耗到更高的高度，这些项目就会分布不均匀。

我想要的是元素的数量（在这种情况下是 li）在折叠或展开时在任何时候都相同。

我将尝试说明：

Collapsed:
Accordion item 1 | Accordion item 4
Accordion item 2 | Accordion item 5
Accordion item 3 |

Item 1 expanded:
Accordion item 1 Expanded | Accordion item 3
Accordion item 1 Expanded | Accordion item 4
Accordion item 1 Expanded | Accordion item 5
Accordion item 2          |

I cannot have the elements re-ordered, it should be:
Accordion item 1 Expanded | Accordion item 4
Accordion item 1 Expanded | Accordion item 5
Accordion item 1 Expanded |
Accordion item 2          |
Accordion item 3          | 

有什么诀窍可以做到这一点吗？

标签： htmlcss