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

Question

我有一个列类，它将CSS列的数量设置为3。这看起来如下：

.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/

如何在三列而不是两列中按预期分配四个项目？

Answer 1

我不认为这可以使用css列。

看起来你应该只使用display:inline-block或float:left来实现你的布局 - 就像这样：

FIDDLE

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

CSS

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

我之所以认为你真的不想使用css列是因为你自己写的是你想要实现的目标：

Apples Grapes Pears Bananas

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

Apples Pears Bannanas Grapes

因为css列首先按列工作。