CSS:排列多行和多列的列表

Question

我的模板文件中有一个简单的有序列表,我无法更改.

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

有没有办法像这样订购我的内容:两列,最后一项将始终在第二列.

我试过flex,但是在第三个项目之后我找不到打破流程的方法.有没有办法通过CSS做到这一点,还是我不得不求助于使用jQuery进行攻击？

Answer 1

我花了几个小时研究这个问题，但没有找到一个不涉及容器固定高度的合适解决方案。我发现的最接近的事情是使用该column-count属性并在最后一个元素之前添加分栏符，目前仅适用于 Chrome：

ul {
  -webkit-column-count: 2;
  column-count: 2;
}

li:last-of-type {
  -webkit-column-break-before: always;
}

JSFiddle