我正在使用 CSS 多列构建一个 2 列布局，我想提示一下在哪里断开列。
所以我说:columns: 2 在容器上，break-before: column 在我想要休息的 child 身上。
IE(在我的情况下为 11)决定将我的内容分成 3 列并溢出到其框的右侧:-(
Chrome(使用前缀替代品 -webkit-columns:2 和 -webkit-column-break-before: always )表现良好。
我在这里做错了吗？
这是 IE 的不当行为吗？
任何解决方法建议？
最佳答案
由于我自己对这个问题非常感兴趣，因此我研究了规范和多列布局的一些示例。
首先，我不得不说该规范非常“不精确”!
但似乎任何中断定义都优先于 column-count 值(尽管我无法在规范或其他任何地方明确找到它)。
仅当根据多列 pseudo-algorithm 时，设置断点的相应元素已经是最后一列的一部分(如您的示例 fiddle )，才会发生这种情况。
@GCyrillus 给出的 The example (请参阅问题评论)只是有效，因为高度设置强制算法在内联方向上创建额外的列框之前首先填充给定的高度。
如果将高度从 20em 更改为 10em，您可以看到“原始”效果!
所以毕竟，我倾向于说这不是错误并且 IE 的行为是正确的。
至少不重新计算或重新填充列可能是多列算法的错误或缺点，因此尽管有任何中断，列计数值仍会得到尊重。从逻辑上讲，这只能在定义的断点数比列计数值少 1 时完成。
由于实际上 IE 10+ 是唯一支持包含 break-xy 属性的多列模块的浏览器，因此很难判断这种行为是对还是错，以及 future 其他浏览器将如何处理!
现在，我建议根本不要使用这些属性。
关于css - IE(11)CSS 多列处理不当？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22895282/