Ordine div diviso tramite css solo

Question

Mi chiedo se sia possibile visualizzare due elementi div in ordine inverso usando solo css. Nessuna modifica HTML o codice javascript, solo css.

Ho il seguente html:

<div id="container" class="clearfix"> 
    <div id="right-sidebar">Right</div> 
    <div id="left-sidebar">Left</div> 
</div> 

e questo css corrente:

#container { 
    width: 200px; 
    border: 2px solid blue; 
    padding: 2px; 
    margin: 0; 
} 

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#left-sidebar, #right-sidebar { 
    width: 150px; 
    padding: 2px; 
} 

#left-sidebar { 
    border: 2px solid red; 
    float: left; 
} 

#right-sidebar { 
    border: 2px solid green; 
    float: right; 
} 

Il risultato mostra la div proprio sopra la sinistra. Mi piacerebbe scambiarli, mostrando quello a sinistra sopra quello a destra, mantenendo le proprietà del contenitore (altezza calcolata automaticamente).

Per spiegarlo in parole diverse, mi piacerebbe ottenere utilizzando solo CSS lo stesso risultato che otterrei scambiando i due div nel codice html.

È possibile anche con solo css? [Sto sognando un float: proprietà in basso :)]

http://jsfiddle.net/mT7JJ/1/

Answer 1

Secondo this e molti altri, temo che non è possibile scambiare solo con i CSS, ma ho trovato qualcosa che vi aiuterà in questa situazione e che è this

Quindi questa sarà la tua modifica sulla fiddle

#container { 
display: table; width: 200px; 
border:1px red solid; 
} 
#left-sidebar { 
display: table-header-group; 
} 
#right-sidebar { 
display: table-footer-group; 
} 

Answer 2

L'unica cosa che posso pensare è posizione relativa/assoluta. Ma non sarà davvero efficiente, anche se

Answer 3

<div id="container" class="clearfix"> 
    <div id="left-sidebar">Left</div> 
    <div id="right-sidebar">Right</div> 

</div> 
#container { 
    width: 200px; 
    border: 2px solid blue; 
    padding: 2px; 
    margin: 0; 
} 

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#left-sidebar, #right-sidebar { 
    width: 150px; 
    padding: 2px; 
} 

#left-sidebar { 
    border: 2px solid red; 

} 

#right-sidebar { 
    border: 2px solid green; 

} 

check this left div above right div

Answer 4

Una soluzione moderna, come è stato scelto, è il layout flessibile.

Un'altra posibilitity difficile sta usando trasforma

webkit demo

ho un solo ruotando il contenitore a testa in giù, e poi rotaing div interni per farli sembrare OK. È fatto in hover, per mostrare l'effetto netto. L'hover è un po 'inestimabile a causa del clearfix, ma qui non è rilevante.

#container:hover { 
    -webkit-transform: rotateX(180deg); 
} 
#container:hover div { 
    -webkit-transform: rotateX(180deg); 
} 

mi piace rispondere a una domanda che è stata dichiarata :-) imposible

Answer 5

Utilizzando solo i CSS:

#blockContainer { 
display: -webkit-box; 
display: -moz-box; 
display: box; 

-webkit-box-orient: vertical; 
-moz-box-orient: vertical; 
box-orient: vertical; 
} 
#blockA { 
-webkit-box-ordinal-group: 2; 
-moz-box-ordinal-group: 2; 
box-ordinal-group: 2; 
} 
#blockB { 
-webkit-box-ordinal-group: 3; 
-moz-box-ordinal-group: 3; 
box-ordinal-group: 3; 

}

<div id="blockContainer"> 
<div id="blockA">Block A</div> 
<div id="blockB">Block B</div> 
<div id="blockC">Block C</div> 
</div> 

http://jsfiddle.net/hLUHL/713/