无法在CSS中使用column-count设置X列

Question

我在CSS中使用列时遇到了一些问题。我想设置column-count: 6;，但结果只有5列。它似乎可以很好地用于values <=5，但当我尝试设置更高的值时，它会产生奇怪的结果。列计数不匹配。

​

.columns {
  column-count: 6;
}
.columns__item {
  display: inline-block;
  background: #fff;
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

<ul class="columns">
    <li class="columns__item">Item 1</li>
    <li class="columns__item">Item 2</li>
    <li class="columns__item">Item 3</li>
    <li class="columns__item">Item 4</li>
    <li class="columns__item">Item 5</li>
    <li class="columns__item">Item 6</li>
    <li class="columns__item">Item 7</li>
    <li class="columns__item">Item 8</li>
    <li class="columns__item">Item 9</li>
    <li class="columns__item">Item 10</li>
    <li class="columns__item">Item 11</li>
    <li class="columns__item">Item 12</li>
    <li class="columns__item">Item 13</li>
    <li class="columns__item">Item 14</li>
</ul>

​

这就是问题所在：https://jsfiddle.net/btqxd20r/1/。我正在用Chrome进行测试。

Answer 1

这可能是display: inline-block;的问题，将您的项目增加到40或50，然后检查，它正常工作。以下是更新后的fiddle https://jsfiddle.net/btqxd20r/2/

更新：

使用float: left set width (以像素为单位)在一行中显示您的项目，并使其对设备作出响应。请记住，您应该在浮动div结束后使用clear:both css ...