Chrome 中的 CSS3 列具有 child DIV 个元素

Question

我在使用 CSS3 列时遇到问题，它们不像我在 Chrome 53.0.2785 中预期的那样工作 - 它们在 Firefox 49、IE11 中像我预期的那样工作, 边缘 38.14393

我的 "container" DIV 的前两个 child 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 会打断 DIVs（甚至分发边框）- Firefox 不会
- 请注意，我无法在 parent 中设置 column-count（结合删除 inline-block 似乎 kind-of-work），因为它应该是流体布局。每个 DIV 的高度也是动态的，所以如果这是一个要求，我必须为此编写一些 JS（但我更愿意在没有 JS 的情况下工作）。
如果我删除 border-sizing 和 child DIV 的所有属性，它会按预期工作，但是一旦我开始填充内部 DIVs 与一些其他内容（可能有边框或填充或 box-shadows），它再次中断

如果我加第三个childDIV

<div>Some content 3</div>

会有Chrome中的列，但显示为

1..3
2

第四个 DIV 将显示在 DIV3 下方，第五个 DIV 再次显示在第一个 "row" 中。

1..3..5
2..4

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

Answer 1

您可以通过在容器内浮动 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;
}

编辑：

然后我不使用 column-gap，而是将 margin left 应用到容器内的每个 divs。像这样;

.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。见 https://jsfiddle.net/0sz6t3ft/1/

Answer 2

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 claims that IE11 and EDGE do support it - see https://jsfiddle.net/s7cfbqzt/13/ 在 IE11 和 EDGE 中也是如此。如果 IE 和 EDGE 真的支持它，他们会将初始值设置为 1 而不是 2。

针对我的用例的修复是添加

orphans: 1;
widows: 1;

到容器-class in CSS.

感谢@Jay 花时间研究这个问题！

Chrome 中的 CSS3 列具有 child DIV 个元素

CSS3 columns in Chrome with child DIV elements

html

css

google-chrome

css-multicolumn-layout