只使用css交換div訂單

Question

我在想如果可以使用css以倒序顯示兩個div元素。 無html更改或javascript代碼，只是CSS。

我有以下的html：

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

該電流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; 
} 

結果顯示，其左，一個右股利。我想交換它們，顯示左邊的那個，保持容器屬性（自動計算的高度）。

爲了用不同的詞來解釋它，我想使用CSS來達到與通過交換html代碼中的兩個div所獲得的結果相同的結果。

它甚至可能只有CSS？ [我夢到一個float：底部財產:)]

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

Answer 1

根據this和許多人一樣，我怕你不僅可以用CSS交換，但我發現的東西，這將幫助你在這種情況下，這是this

因此，這將是您的上fiddle

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

Answer 2

唯一想我能想到的是相對/絕對位置。但它不會是真正有效的，雖然

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; 

} 

編輯3210

Answer 4

一個現代化的解決方案就像柔性佈局一樣。

另一個棘手posibilitity使用變換

webkit demo

我只是一個旋轉容器倒置，然後rotaing內申報單，使它們看起來OK。它在懸停中完成，以顯示淨效應。 由於clearfix，懸停有點不穩定，但這與此無關。

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

我樂意回答的問題已被宣佈IMPOSIBLE :-)

Answer 5

問題只使用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/