Chrome 中带有子 DIV 元素的 CSS3 列

Question

我在使用 CSS3 列时遇到问题，它们在 Chrome 53.0.2785 中无法正常工作 - 它们在 Firefox 49、IE11、EDGE 38.14393 中无法正常工作

我的“容器”DIV 的前两个子 DIV 在 Chrome 中显示在彼此下方，但在 Firefox 中彼此相邻

HTML：

<div class="container">
  <div>
    Some content 1
  </div>
  <div>
    Some content 2
  </div>
</div>

CSS：

* {
  box-sizing: border-box;
}
.container {
  column-width: 100px;
  column-gap: 12px;
}
.container > div {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  padding: 20px;
}

在这里测试：https://jsfiddle.net/s7cfbqzt/3/

现在，Chrome 中发生了一些奇怪的事情：

• 如果我只删除“display: inline-block”，Chrome 会分解 DIV（甚至边框也会分布） - Firefox 不会

  • 请注意，我不能在父级中设置列数（与删除内联块相结合似乎有点工作），因为它应该是一个流畅的布局。每个 DIV 的高度也是动态的，所以如果这是一个要求，我必须为此编写一些 JS（但我更愿意让它在没有 JS 的情况下工作）。

• 如果我删除边框大小和子 DIV 的所有属性，它会按预期工作，但是一旦我开始用其他内容（可能有边框或填充或框阴影）填充内部 DIV ，它又坏了

如果我添加第三个子 DIV

<div>Some content 3</div>

Chrome中会有列，但显示为

1..3
2

第四个 DIV 将显示在 DIV3 下方，第五个 DIV 再次显示在第一“行”中。

1..3..5
2..4

这是 Chrome 中的错误还是我做错了什么？

Answer 1

实际上，Chrome 可能是唯一正确执行此操作的浏览器：

https://drafts.csswg.org/css-break/#widows-orphans

Name:   orphans, widows
Value:  <integer>
Initial:    2

IE 11、EDGE 和 Firefox (49) 不（还？）支持寡妇和孤儿，尽管 http://caniuse.com/#feat=css-widows-orphans 声称 IE11 和 EDGE 确实支持它 - 请参阅 IE11 和 EDGE 中的 https://jsfiddle.net/s7cfbqzt/13/。如果 IE 和 EDGE 确实支持它，他们会将初始值设置为 1 而不是 2。

我的用例的修复是添加

orphans: 1;
widows: 1;

到 CSS 中的容器类。

感谢 @Jay 抽出时间来研究这个问题！

Answer 2

您可以通过浮动容器内的 div 来实现此目的，您还需要浮动其容器，否则它们将无法正确显示。

* {
  box-sizing: border-box;
}
.container {
  column-width: 100px;
  column-gap: 12px;
float: left;
}
.container > div {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  padding: 20px;
float: left;
}

编辑：

然后，我将不使用列间隙，而是将边距应用于容器内的每个 div。像这样;

.container {
    width: 100%;
    float: left;
    }
    .container > div {
      width: 100px;
      border: 1px solid black;
      padding: 20px;
    float: left;
margin-left: 12px;
    }
.container > div:first-child {
margin-left: 0;
}

编辑：

如果高度不需要匹配 - 从容器 div 中删除 column-width。见https://jsfiddle.net/0sz6t3ft/1/