代码之家 › 专栏 › 技术社区 › niklasfi Rahul Tripathi

不考虑列计数和列宽

column-count css-multicolumn-layout column-width css html

3

niklasfi Rahul Tripathi · 技术社区 · 7 年前

问题

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

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

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

2400px

请注意最后一列中的大黑色空间。我的数学告诉我2400/308=7.79>7.2400px视窗宽度下预计有七列。然而,布局引擎只使用了六个。这种行为在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">

2 回复 | 直到 7 年前

1

2

Johannes 7 年前

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

然而,我想补充一点:

因此,将第四项放入第一行,以使所有项都可以放入由定义的列数中 column-count . 在本例中,这导致只有六列中包含项目,但其中有7列。

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

2

0

elvirus 7 年前

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

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

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

也许你应该用另一种方式展示你的内容。。。也许你应该研究一下布局库,比如Masonry f.i。 https://masonry.desandro.com