CSS3: Floating primo div tra secondo e terzo

Question

dovrebbe essere una semplice soluzione a questo:

ho div nel seguente ordine:

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

devo avere loro in questo ordine. Usando i float, come faccio a ottenere il primo div ("middle") tra le seconde div.

Ogni div ha un'altezza impostata e una larghezza impostata (in px).

Ho provato a fare float:left; al centro:

[[centrale] a destra] [left]

e poi float:right; sul cluster superiore:

[ left [[middle] right]]

, ma si presenta come

[centrale] [left] [a destra]

Qualsiasi aiuto?

EDIT: questa è la fonte di corrente:

http://pastebin.com/sjiw9PLn

http://pastebin.com/NMsWk1nZ

Answer 1

si può scrivere in questo modo:

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

Scegli questa http://jsfiddle.net/8amez/

Answer 2

Se vengono impostate le larghezze e altezze, utilizzare l'attributo css:

position:absolute; 

e giocare con:

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

Answer 3

Se si è, infatti, in grado di aggiungere un elemento di involucro div, allora questo funziona (nella misura in cui il vostro semplice esempio) a JS Fiddle:

​#left { 
    float: left; 
} 

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

​#wrap #middle { 
    float: left; 
} 

#wrap #right { 
    float: right; 
}​ 

Dato il seguente codice HTML:

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

Tenere presente, tuttavia, che è probabile che sia abbastanza fragile; e sarebbe meglio raggiunto da ri-ordinare il mark-up, o, se ciò non può essere cambiata sul lato server, o in HTML, utilizzando Javascript per spostare le cose, ad esempio:

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

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

JS Fiddle demo .

Answer 4

Presumendo che HAS sia in questo ordine per alcuni strumenti di scraping che afferrano il codice basandosi su di esso in questo modo, perché non aggiungete un po 'di JavaScript per mescolarli dopo che la pagina è stata caricata.