Yalnızca css kullanarak div siparişini değiştir

Question

Sadece css kullanarak ters sırayla iki div öğesi göstermenin mümkün olup olmadığını merak ediyorum. Hiçbir html değişikliği veya javascript kodu, sadece css.

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

ve bu akım 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; 
} 

sonuç sol birinin üstünde sağ div gösterir

aşağıdaki html var. Onları takas etmek istiyorum, sola doğru olanı göstererek konteynır özelliklerini koruyorum (otomatik hesaplanan yükseklik).

Farklı kelimelerle açıklamak gerekirse, html kodundaki iki div değiştirerek elde ettiğim aynı sonucu sadece CSS kullanarak elde etmek istiyorum.

Sadece css ile mümkün mü? [Bir şamandıra konuda hayal: Alt özellik :)]

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

Answer 1

this ve diğerleri göre, ben sadece css ile takas edemez korkuyorum olsa gerçekten etkili olmayacak, ama bu durumda size yardımcı olacaktır şey buldum ve o this

olduğunu

Yani bu fiddle

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

Answer 2

sadece ben düşünmek düşünüyorum göreli/mutlak bir pozisyon. Ama

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; 

} 

üzerinde düzenleme olacak

Answer 4

Modern bir çözüm, ele alındığı gibi, esnek bir düzendir.

Başka zor posibilitity kullanıyor dönüşümler

webkit demo

Ben sadece baş aşağı kabı dönen ve sonra onları ok görünmesi için iç div'leri rotaing. Net etkiyi göstermek için vurgunun içinde yapılır. Vurgu, clearfix nedeniyle biraz inestable, ancak bu burada alakalı değil.

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

Sadece CSS kullanarak imposible :-)

Answer 5

ilan edilmiş bir soruya cevap zevk:

#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/