3

问题

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

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

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

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

2400像素

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

问题

我想知道是什么导致浏览器在这个宽度上忽略第 7 列。有没有办法避免这种行为？

编码

可以使用以下源或此小提琴重现该问题

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">

4

2 回答 2

2

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

不过，我想补充一点：

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

因此，将第四个项目放入第一行，以使所有项目都适合 定义的列数column-count。在这种情况下，这导致只有 6 个列中有项目，但有 7 个列。

正如我之前写的，整个容器的高度总是取决于第一列（即如果高度不固定）。其余列将仅根据该高度填充（它们不会比第一个高），而不是根据其余列的均匀分布。因此，有时结果可能是像您这样的情况，最后一列仍然为空。

于 2017-10-04T19:00:48.633 回答
0

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

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

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

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

于 2017-10-04T19:30:29.930 回答