列数和列宽未得到遵守

Question

问题

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

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

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

这样每列应该是308px宽。我的演示页面看起来很正常，除了在大约2400px宽度下观看时。然后它看起来像这样：

请注意最后一列中的大黑色空间。我的数学告诉我2400/308 = 7.79＆gt; 7.人们期望在2400px视口宽度处存在七列。但是，布局引擎只使用了六个。当使用column-width: 308px替换column-count: 7时，此行为在chrome和firefox之间保持一致，甚至仍然存在。

问题

我想知道导致浏览器忽略第7列的原因是什么原因。有没有办法避免这种行为？

守则

可以使用以下来源或this fiddle

重现此问题

body {
  padding: 0;
  background-color: black;
  margin: 0;
  column-width: 308px;
  column-gap: 0;
  column-rule: none;
  line-height: 0;
}

img {
  margin: 12px;
  padding: 9px;
  border: 1px solid darkgrey;
  background-color: white;
  display: inline-block;
  width: 264px;
}

.w {
  height: 176px;
}

.h {
  height: 396px;
}

<img class="w">
<img class="w">
<img class="h">
<img class="w">
<img class="w">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="h">
<img class="w">
<img class="w">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

Answer 1

我几天前在这里回答了类似的问题：https://stackoverflow.com/a/46412808/5641669

但是，我想添加一些内容：

如果未修复容器的高度，则项目/文本到列的分布总是取决于第一列的高度。在您的情况下，如果第一列中的最后一项将移动到第二列，则其他列将不太高（因为它们根据第一列调整其高度），因此这些项目完全不适合分为7列 - ＆gt;不可能。

这样第四项就会被放入第一行，以使所有项目都符合column-count定义的列数。在这种情况下，这导致只有六个列中包含项目，但是有7列。

正如我之前所写，整个容器的高度总是取决于第一列（即如果高度不固定）。其余的列将根据该高度填充（它们不会比第一个更高），而不是根据偶数分布，如果项目到其余列。因此，有时候结果可能与您的情况类似，最后一列仍为空。

Answer 2

如上所述，由于列的工作方式，预计会出现此行为。 但是你可以解决这个问题，你必须在所有情况下测试它。特别是如果你有动态数量的物品。

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

此解决方案不能处理所有情况，但它可以是针对特定情况的解决方法。

也许你应该以另一种方式展示你的内容......也许你应该看看像Masonry f这样的布局库。一世。 它可能看起来太多但它解决了许多问题： numexpr module