html - 无法使用 CSS 中的列数设置 X 列

Question

我在使用 CSS 中的列时遇到了一些问题。我想设置column-count: 6;，但结果只有 5 列。对于 <=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，然后检查，它工作正常.. 这是更新的小提琴https://jsfiddle.net/btqxd20r/2/

更新：

使用float: left设置宽度（以像素为单位）在行中显示您的项目，如果您想让它响应设备。请记住，您应该clear:both在浮动 div 结束后使用 css ...