Html 不考虑列计数和列宽 问题

使用CSS

column

-属性在页面上创建列，我注意到布局引擎的一些奇怪行为。也就是说，我正在使用

body {
  padding: 0;
  background-color: black;
  margin: 0;

  column-width: 308px;
  column-gap: 0;
  column-rule: none;
  line-height: 0;
}

因此，每列的宽度应为308px。我的演示页面看起来非常正常，除了以2400像素的宽度观看。然后看起来是这样的：

请注意最后一列中的大空格。我的数学告诉我2400/308=7.79>7。我们预计将有七列以2400px的视口宽度显示。但是，布局引擎只使用了六个。这种行为在chrome和firefox之间是一致的，甚至在将

列宽：308px

替换为

列计数：7

时仍然存在

问题 我想知道是什么原因导致浏览器忽略第7列的宽度正好如此。有没有办法避免这种行为

代码 可以使用以下来源或方法重现问题

正文{
填充：0；
背景色：黑色；
保证金：0；
列宽：308px；
列间距：0；
列规则：无；
线高：0；
}
img{
利润率：12像素；
填充：9px；
边框：1px实心暗灰色；
背景色：白色；
显示：内联块；
宽度：264px；
}
w{
高度：176像素；
}
h{
高度：396px；
}

---

几天前，我在这里回答了一个类似的问题：

不过，我想补充一点：

如果容器的高度不固定，则项目/文本在列中的分布始终取决于第一列的高度。在您的情况下，如果将第一列中的最后一项移动到第二列，则其他列的高度将降低（因为它们根据第一列调整其高度），因此这些项目将无法全部放入7列->不可能

因此，第四个项目被放在第一行中，以使所有项目都符合

column count

定义的列数。在本例中，这将导致只有六个列包含项目，但其中有7个列

---

如前所述，整个容器的高度始终取决于第一列（即，如果高度不固定）。其余的列将仅根据该高度填充（它们不会比第一列高），而不是按照均匀分布（如果项目分配到其余的列）。因此，有时结果可能与您的情况类似，最后一列仍然为空。

如上所述，这种行为是预期的，因为列是如何工作的。 但是您可以解决这个问题，但是您必须在所有场景中测试它。特别是如果你有一个动态的项目数量

@media screen and (min-width: 2400px) and (max-width: #something#) {
  body {
    column-gap: 100px; /* adjust to your needs */
  }
}

此解决方案不能处理所有情况，但它可以作为非常特定情况的变通方法

也许你应该用另一种方式展示你的内容。。。也许你应该研究一下布局库，比如f。我 这似乎太多了，但它解决了许多问题：

---

对我来说，它正好发生在2445px之后