我正在使用 CSS 多列构建 2 列布局，并且我想给出有关在何处断开列的提示。
所以我说：columns: 2在容器上，以及break-before: column在我想要休息的地方。
IE（在我的例子中是 11）决定将我的内容分成 3 列并溢出到其框的右侧:-(
Chrome（使用前缀替代品-webkit-columns:2 and -webkit-column-break-before: always）表现良好。
我在这里做错了什么吗？
这是 IE 的不当行为吗？
有什么解决方法建议吗？
由于我自己对这个问题非常感兴趣，所以我研究了多列布局的规范和一些示例。
首先我不得不说这个规范非常“不精确”！
但似乎任何中断定义都优先于column-count值（尽管我无法在规范或其他任何地方明确找到它）。
仅当根据多列伪算法 http://www.w3.org/TR/css3-multicol/#pseudo-algorithm，设置断点的相应元素已经是最后一列的一部分（如您的示例小提琴中所示）。
这个例子 http://jsfiddle.net/JDecq/3/@GCyrillus 给出的（请参阅问题评论）可以正常工作，因为高度设置强制算法首先填充给定的高度，然后再在内联方向创建附加列框。
如果将高度从 20em 更改为 10em，您可以看到“原始”效果！
所以毕竟，我倾向于说这不是一个错误，并且 IE 的行为是正确的。
至少，不重新计算或重新填充列可能是多列算法的错误或缺点，因此尽管有任何中断，列计数值仍然受到尊重。从逻辑上讲，只有定义的断点数量比列计数值少 1 时才能完成此操作。
由于实际上 IE 10+ 是唯一支持多列模块（包括 break-xy 属性）的浏览器，因此很难判断这种行为是对还是错以及其他浏览器将来将如何处理此问题！
目前，我建议根本不要使用这些属性。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
