使用純CSS重新排列div元素

Question

我的網站的主要樣式表中有div元素按特定順序排列。在我的打印樣式表中，我希望使用純粹的CSS重新排列div元素的順序。我怎樣才能做到這一點？

在我的主要樣式表假定這些是的div：

ad

be

cf

我希望它看起來像這樣在我的打印樣式表（我刪除非打印機友好的div）：

a

f

c

d

Answer 1

您可以刪除不需要的div和堆棧其餘的div像這樣...

http://jsfiddle.net/ywTJy/2/

div { 
    width: 50%; 
    background-color: #ccc; 
    float: left; 
} 

/* print CSS */ 

div { 
    float: none; 
    width: 100%; 
} 

#b, #e { 
    display: none; 
} 

我不知道，如果你有意想將「F」 DIV移到第二個位置，但是如果您要爲網絡訂購內容並重新訂購，則看起來很尷尬。

Answer 2

取決於你究竟是如何 「想」 來定位他們，並有使用CSS很多方面。最基本的方式來移動頁面周圍的div將使用位置：絕對和相應地調整頂部/左/等CSS屬性。我認爲它仍然適用於印刷品。

請注意，我不會僅僅依靠絕對定位的項目來設計網頁，但這是一種方法。

Answer 3

如果內容流動和/或動態，您將遇到問題。如果你能可靠地知道該項目將在彼此相關，你可以做這樣的事情：

<div style="width:100px;position:relative;left:100px"> 
<div style="width:100px;position:relative;left:-100px"> 

這將交換兩個並排側的div的可視位置。

Answer 4

一般來說，no：不會導致position:static項目（默認值）以不同順序流動。 CSS變化改變了元素的表示，但是內容的語義和表示的內容之間存在着模糊的界限。就像一個句子和段落在邏輯上跟在另一個句子和段落之後一樣，你不能使用CSS來改變內容的含義。