css

Question

我有一个将 CSS 列数设置为三的列类。如下所示：

.columns {
  column-count:3;
  -moz-column-count:3;
  -webkit-column-count:3;
}

<ul class="columns">
  <li>Apples</li>
  <li>Grapes</li>
  <li>Pears</li>
  <li>Bananas</li>
</ul>

我希望它以以下格式显示：

Apples Grapes Pears Bananas

这可以在这个小提琴上看到：http: //jsfiddle.net/fM8ce/1/

如果我删除香蕉，则所有三列都按预期使用，并以下列方式输出：

Apples Grapes Pears

这可以在这个小提琴中看到：http: //jsfiddle.net/fM8ce/

我怎样才能让四个项目按预期分布在三列而不是 2 列？

score 3 · Accepted Answer

我认为使用 css 列是不可能的。

看起来您应该简单地使用display:inline-block或float:left实现您的布局 - 如下所示：

<ul class="columns">
    <li>Apples</li>
    <li>Grapes</li>
    <li>Pears</li>
    <li>Bananas</li>
</ul>

.columns {
    width: 100%;
}
li {
    width: 33%;
    display:inline-block;
}

我不认为你真的想使用 css 列的原因是你自己写了你想要实现的：

Apples Grapes Pears Bananas

而即使有可能使用 css 列 - 最终结果将是：

Apples Pears Bannanas Grapes

因为 css 列首先处理列。

css - 当我有偶数列时，如何强制奇数列计数？