使用CSS拆分两列中的项目列表

Question

我有一个项目列表(从CMS获取),其编号未知.我需要在大致相同数量的项目的两列中显示此列表.以下代码有效但我在下面解释为什么它有问题:

<ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

ul {
  display: flex;
  flex-wrap: wrap;
}

如果物品的内容总是相同的高度,这一切都很好.但是当一个项目中的内容更长时,同一行中的同级项目将被强制扩展以匹配相同的高度.我不希望这样.我希望两列在项目高度方面完全独立.

单独使用CSS可能吗？

编辑:

这是一个揭露问题的JSfiddle:https://jsfiddle.net/g9p3m2dp/

Answer 1

ul {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  padding-left: 0;
}
ul li {
  list-style-position: inside;
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
                 break-inside: avoid;
}

<ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

注意columns实际上是<'column-width'> ||的简写 <'column-count'>.这意味着你也可以指定宽度(px,%,em,cm,in...),而不是指定的列数.

另外请注意,你需要设置list-style-position: inside;为ol和ul元素,以显示他们的孩子<li>在右侧列S子弹(或数字),Firefox除外,它设置list-style-position到inside默认.

Answer 2

也许你可以尝试这种方式，但是顺序会改变

ul {
  display: block;
}
ul li {
    float: left;
    width: 50%;
}

    <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    </ul>