Zamień div zamówienie przy użyciu tylko css

Question

Zastanawiam się, czy możliwe jest wyświetlanie dwóch elementów div w odwróconej kolejności za pomocą tylko css. Brak zmiany html lub kodu javascript, tylko css.

Mam następujące HTML:

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

i ten prąd CSS:

#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; 
} 

wynik pokazuje prawy div nad lewym. Chciałbym je zamienić, pokazując lewy nad prawym, zachowując właściwości kontenera (wysokość obliczona automatycznie).

Aby wyjaśnić to w różnych słowach, chciałbym osiągnąć przy użyciu tylko CSS taki sam wynik, jaki uzyskałbym, zamieniając dwa elementy div w kodzie HTML.

Czy jest to możliwe tylko przy pomocy css? [Śnię o pływaka: własność dno :)]

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

Answer 1

Według this i wielu innych, obawiam się, nie można zamienić tylko z css, ale znalazłem coś, co pomoże w tej sytuacji i to jest this

Więc to będzie Twój edycji na fiddle

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

Answer 2

Jedynym myślę, że można myśleć o jest względne/bezwzględne położenie. Ale to nie będzie naprawdę skuteczny choć

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

Jednym z nowoczesnych rozwiązań, jak to zostało przyjęte, jest układ flex.

Innym zastosowaniem jest trudne posibilitity transformacje

webkit demo

I prostu obracając pojemnik do góry nogami, a następnie rotaing wewnętrzne div, aby wyglądały OK. Robi się to w dymku, aby pokazać efekt netto. Zawieszenie jest trochę nietrwałe ze względu na poprawkę, ale nie jest to tutaj istotne.

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

Lubię odpowiedzi na pytanie, który został zadeklarowany imposible :-)

Answer 5

Korzystanie tylko 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/