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

【问题标题】：How can I force an odd column-count when I have an even number of columns?当我有偶数列时，如何强制奇数列计数？
【发布时间】：2014-09-20 16:44:48
【问题描述】：

我有一个将 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 列中？

【问题讨论】：

列功能不是这样工作的。它用于自动将长文本分成多列。如此处所示：jsfiddle.net/N9Ych
如果文本可以分布在四个单元格中，这也会中断：jsfiddle.net/N9Ych/1
您的示例只是为您的浏览器宽度提供了更少的文本。让你的窗口宽度变小，看着它进入第三列。
我同意 css 3 列魔法是用于破坏内容，而不是列表；但在这种情况下，它看起来更像是一个错误而不是一个功能。如果它使用 4 列而不是 3 列，最好避免使用它并使用其他列表定位技巧，例如stackoverflow.com/questions/3197110/…。这是所有基本的 CSS 边距、高度等。

【解决方案1】：

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

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

<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 列首先处理列。

【讨论】：