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>

我希望它以下列格式显示:

苹果葡萄梨
香蕉

这可以在这个 fiddle 上看到:http://jsfiddle.net/fM8ce/1/

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

苹果葡萄梨

这可以在这个 fiddle 中看到: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 列的原因是因为你自己写了你想要实现的:

苹果葡萄梨
香蕉

而即使使用 css 列是可能的 - 最终结果将是:

Apple Pears Bannanas
葡萄

因为 css 列首先在列中工作。