CSS3: Floating erste div zwischen dem zweiten und dritten

Question

Sollte eine einfache Lösung für dieses sein:

ich die div-Tags in der folgenden Reihenfolge haben:

<div id="middle"></div> 
<div id="right"></div> 
<div id="left"></div> 

Ich habe sie in dieser Reihenfolge haben. Wie kann ich mit floats das erste div ("middle") zwischen den zweiten divs einfügen?

Jedes div hat eine festgelegte Höhe und eine festgelegte Breite (in px).

Ich habe versucht zu tun float:left; auf der Mitte:

[[Mitte] right] [links]

und dann float:right; auf dem Spitzencluster:

[ links [[Mitte] rechts]]]

, aber es zeigt sich als

[Mitte] [links] [rechts]

Hilfe?

EDIT: Dies ist die aktuelle Quelle:

http://pastebin.com/sjiw9PLn

http://pastebin.com/NMsWk1nZ

Answer 1

Sie so schreiben können:

div{ 
display:inline-block; 
} 
#left{ 
float:left; 
} 
#right{ 
float:right; 
} 

prüfen diese http://jsfiddle.net/8amez/

Answer 2

Wenn Breiten und Höhen eingestellt werden, verwenden Sie das CSS-Attribut:

position:absolute; 

und spielen mit:

left: 100px; /* width of the div on the left */ 

Answer 3

Wenn Sie sind in der Tat, in der Lage ein Wrapper-div-Element hinzufügen, dann funktioniert das (soweit Ihr einfaches Beispiel) bei JS Fiddle:

​#left { 
    float: left; 
} 

​#wrap { 
    width: 80%; 
    float: right; 
} 

​#wrap #middle { 
    float: left; 
} 

#wrap #right { 
    float: right; 
}​ 

Angesichts der folgenden HTML:

<div id="wrap"> 
    <div id="middle">middle</div> 
    <div id="right">right</div> 
</div> 
<div id="left">left</div>​​​​​​​​​​​​​​​​​​ 

Bedenken Sie jedoch, dass dies wahrscheinlich ziemlich fragil ist; und würde besser erreicht wird durch Nachbestellung Ihrer Aufschläge, oder, falls dies nicht serverseitige, oder in der HTML geändert werden, mit Hilfe von JavaScript, Dinge zu bewegen, zum Beispiel:

var middle = document.getElementById('middle'), 
    left = document.getElementById('left'); 

middle.parentNode.insertBefore(middle,left.nextSibling);​ 

JS Fiddle demo .

Answer 4

Angenommen, es muss in dieser Reihenfolge für einige Scraping-Tools sein, die den Code greifen, der darauf basiert, dass es so ist, warum fügen Sie nicht einfach etwas JavaScript hinzu, um sie nach dem Laden der Seite zu mischen.