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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

注意columns实际上是<'column-width'> || <'column-count'>的简写。这意味着您还可以指定宽度（px，%，em，cm，in ...），而不是指定列数

另请注意，您需要为list-style-position: inside;和ol元素设置ul以在右侧列中显示其子<li>项目符号（或数字），但Firefox，默认情况下将list-style-position设置为inside。

Answer 2

也许您可以尝试这种方式，但订单会被更改

＆＃13;

foo

＆＃13;

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

＆＃13;

Answer 3

您需要column-count：

＆＃13;

ul {
  column-count: 2;
}

＆＃13;

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

＆＃13;

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

3 个答案: