Html 带有子DIV元素的镀铬CSS3列

我在使用CSS3列时遇到了问题，它们不像我在Chrome53.0.2785中预期的那样工作-它们像我在Firefox49、IE11、EDGE 38.14393中预期的那样工作

我的“container”DIV的前两个子DIV在Chrome中显示在彼此下面，但在Firefox中显示在彼此旁边

HTML:

在这里测试它：

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

• 如果我只删除“display:inline block”，Chrome会分解div（甚至边框也会被分发），Firefox不会
  • 请注意，我不能在父级中设置列计数（这与删除内联块似乎有点关系），因为它应该是一个流体布局。每个DIV的高度也是动态的，所以如果这是一个要求，我就必须为此编写一些JS（但是我更喜欢在没有JS的情况下工作）
• 如果我删除边框大小和子div的所有属性，它将按预期工作，但一旦我开始用其他内容填充内部div（可能有边框、填充或框阴影），它将再次中断

如果我添加第三个子DIV

<div>Some content 3</div>

第四个DIV将显示在DIV3下面，第五个DIV将再次显示在第一行

---

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

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

编辑：

---

如果高度不需要匹配-从container div中删除列宽。请参阅Chrome实际上可能是正确执行此操作的浏览器：

到CSS中的容器类

---

感谢@Jay花时间来调查此事

谢谢，不幸的是，这并没有真正起作用，请看在Chrome中（有或没有框大小），它确实起作用，直到添加了额外的内容，让我重新设计样式。等一下，我会相应地更新我的答案。我是否正确地假设你希望这些盒子都有相同的高度？谢谢你的第二次编辑-也许我在最初的问题中太不具体了。使用display:table也不是一个选项，因为它不会将任何DIV拆分为第二行（在jsfiddle中调整列的大小）。div具有动态内容，高度不同。一般来说，列布局效果最好，但“仅”在IE、Firefox和EDGE中，而不是在Chrome或基于Chrome的浏览器中。我将再次查看flex box，我记得也有一个问题，但我手头没有示例。高度是否需要匹配？很抱歉，我将以前的评论发送到了early，请参阅更新的评论（我还不熟悉堆栈溢出，并尝试在注释中插入换行符，我想这是不可能的，因为它只是提交注释？）

1..3
2

1..3..5
2..4

* {
  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;
}

.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;
}

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

orphans: 1;
widows: 1;