CSS3列：“column-span：all”：如何/为什么这样工作？

Question

在使用column-span: all时，加快了CSS3的优势，并遇到了一个有趣的副作用。将该规则添加到作为第三个元素的HR后，前两个元素现在并排呈现。

的jsfiddle：
divs，hr和没有'column-span'样式的列。正如预期的那样，Div''ONE'和'TWO'垂直堆叠： https://jsfiddle.net/9r7ot2v1/7/

<div class="parent">
  <div>
    ONE
  </div>
  <div>
    TWO
  </div>
  </hr>
</div>

相同的代码，column-span: all添加了hr。现在div'ONE'和'TWO'是并排呈现的，你通常需要浮点数或display: inline-block来实现： https://jsfiddle.net/9r7ot2v1/8/

<div class="parent">
  <div>
    ONE
  </div>
<div>
    TWO
  </div>
  </hr>
</div>

为什么column-span: all规则会使div'ONE'和'TWO'并排渲染？

更新：为小提琴添加了背景颜色，使布局变化更加明显。

FWIW：我在Chrome 50.0.2661.87 m

中为我做了这个重复版

Answer 1

<强>更新

似乎column-span: all被大多数浏览器忽略（除了ie和opera之外的所有浏览器）

看这里：http://quirksmode.org/css/columns/

w3s写道使用-webkit前缀：

http://www.w3schools.com/cssref/css3_pr_column-span.asp

我的建议：使用不同的方法来实现相同的结果，因为FF不支持这种表达。