CSS3 Spalten: "column-span: all": Wie/warum funktioniert das?

Question

Ramping auf CSS3 Güte, und lief über einen interessanten Nebeneffekt bei der Verwendung column-span: all. Nach dem Hinzufügen dieser Regel zu einer HR, die das dritte Element war, rendern die ersten beiden Elemente nun Seite an Seite.

JSFiddle:
divs, hr und Spalten ohne die 'Spaltenspanne' -Stil. Divs 'ONE' und 'zwei' stapeln sich vertikal, wie erwartet: https://jsfiddle.net/9r7ot2v1/7/

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

Same-Code, mit column-span: all hinzugefügt, um die hr. Jetzt divs 'ONE' und 'zwei' side-by-side gerendert werden, etwas, das man normalerweise einen Schwimmer bräuchten oder display: inline-block zu erreichen: https://jsfiddle.net/9r7ot2v1/8/

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

Warum die column-span: all Regel divs 'ONE' machen und 'ZWEI' rendern nebeneinander?

Update: Hintergrundfarben zu Fiddles hinzugefügt, um die Layoutänderung deutlicher zu machen.

FWIW: Diese repros für mich in Chrome 50.0.2661.87 m

Answer 1

UPDATE:

wie column-span: all scheint von den meisten Browsern (alle außer IE und Opera) ignoriert

Blick hier: http://quirksmode.org/css/columns/

W3s schreibt das -webkit Präfix zu verwenden:

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

Mein Tipp: Verwenden Sie einen anderen Ansatz, um das gleiche Ergebnis zu erzielen, da FF diesen Ausdruck nicht unterstützt.