不考虑列数和列宽

column-count and column-width not respected

问题

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

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

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

这样每一列的宽度都应该是 308 像素。我的演示页面看起来非常正常,除了以大约 2400 像素的宽度查看时。然后它看起来像这样:

请注意最后一列中的大黑色 space。我的数学告诉我 2400 / 308 = 7.79 > 7。人们会期望在 2400 像素的视口宽度处出现七列。然而,布局引擎只使用了六个。这种行为在 chrome 和 firefox 之间是一致的,甚至在将 column-width: 308px 替换为 column-count: 7 时仍然存在。

问题

我想知道是什么原因导致浏览器忽略正是这个宽度的第 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">

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

不过,我想补充一点:

如果容器的高度不固定,items/text 到列的分布总是取决于第一列的高度。在您的情况下,如果第一列中的最后一项将移至第二列,则其他列的高度将降低(因为它们会根据第一列调整高度),因此这些项目总共不适合 7列 -> 不可能。

因此第四个项目被放入第一行,使所有项目都符合 column-count 定义的列数。在这种情况下,这会导致只有 6 列包含项目,但有 7 列。

如我之前所写,整个容器的高度将始终取决于第一列(即如果高度不固定)。其余列将根据该高度填充(它们不会比第一列高),如果项目到其余列,则不会根据均匀分布。因此,有时结果可能是像你这样的情况,最后一列仍然是空的。

如前所述,由于列的工作方式,这种行为是意料之中的。 但是您可以解决此问题,但您必须在所有情况下对其进行测试。特别是如果您有动态数量的项目。

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

此解决方案无法处理所有情况,但它可以作为针对特定情况的解决方法。

也许您应该以另一种方式布置您的内容...也许您应该研究像 Masonry f 这样的布局库。一世。 它可能看起来太多了,但它解决了很多问题: https://masonry.desandro.com