html - CSS3 列 : "column-span: all": How/Why Does This Work?

Question

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

JSFiddle:
divs、hr 和没有“column-span”样式的列。正如预期的那样，Divs“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”并排呈现，您通常需要 float 或 display: inline-block 来实现: https://jsfiddle.net/9r7ot2v1/8/

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

为什么 column-span: all 规则使 div“一个”和“两个”并排呈现？

更新:为 fiddle 添加了背景颜色，使布局变化更加明显。

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 不支持此表达式。