chrome

Question

我的Google Chrome和列数存在问题。目前我正在使用以下CSS部分。在Firefox中它工作正常，但在chrome中，结果如下：

Current Status

如果从.grid-item中删除“display：inline-block”，它看起来像这样：

Without display:inline-block

我已经测试了几个小时来解决这个问题，但我不知道。有些类别只有3个帖子，但列数为“4”。

好奇的部分是，在有更多帖子（4+）的页面上，它可以正常工作。

必须有解决方案才能解决这个问题？！我不想使用javascript或砌体，因为它可能会在通过无限负载（Jetpack）加载内容时导致问题。

我希望你们能提供帮助。提前谢谢！

.grid  { 
-moz-column-count:4;
-moz-column-gap:2em;
  column-count:4;
  column-gap:2em;
  padding-bottom:2px;
  -webkit-column-gap:2em;
  -webkit-column-count:4;
}

.grid-item {
  background-color: #eee;
  margin-bottom:2em;
  display:inline-block;
}

Answer 1

列规则会破坏元素以调整高度。在你的情况下它发生了。幸运的是，您可以告诉浏览器将特定元素与break-inside: avoid;保持一致。

目前，该属性普遍接受值auto和avoid。 在多列布局中的元素上使用avoid可以防止该属性破裂。

.grid-item { 
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}