有沒有辦法只用CSS來改變HTML DIV的順序？

我有一個.HTML文件，我不能在任何情況下更改。有沒有辦法只用CSS來改變HTML DIV的順序？

我必須使頁面頂部的標題DIV（100％寬度），導航DIV（25％寬度）出現在左下方的標題DIV的下方，使用Sales DIV（ 75％寬度）顯示在導航DIV的右側，產品DIV（100％寬度）低於銷售DIV。

頁腳DIV位於頁面上所有其他DIV下面的最下方，寬度爲100％。

<body> 
    <div id="wrapper"> 
     <div id="nav"></div> 
     <div id="header"></div> 
     <div id="sales"></div> 
     <div id="products"></div> 
     <div id="footer"></div> 
    </div> 
</body>

有沒有可能做到這一點，而不改變HTML DIV的邏輯順序，只使用CSS定位，浮動等？

來源

2012-11-23 NotedThat

是的。你嘗試過什麼嗎？我們不想做你的工作。 – looper

你可以發佈你引用的HTML代碼嗎？ –

您是否嘗試過使用職位？ css可能性的一個很好的例子是[css zen garden]（http://www.csszengarden.com/）。 – Eric

使用固定位置屬性和設置屬性值。

來源

2012-11-23 12:50:37 SaidbakR

它非常依賴於你的頁面的初始結構。唯一的選擇是通過將float：right或float：left結合其他css規則應用於相關部分來浮動div。

使用位置：*僅適用於非常有限的情況，我懷疑單是否足以滿足您的要求。

來源

2012-11-23 12:50:43

我知道這並沒有回答這個問題，但我想通知它是相關的，爲什麼這麼難實現是因爲這是一個不好的做法。

爲了避免焦點順序，SEO或特殊設備（打印機，屏幕閱讀器等）出現一些問題：「內容應按照有意義的順序排序」。

只是看看：C27: Making the DOM order match the visual order

來源

2012-11-23 13:01:49

如果你能解決的頭部高度，那麼它相當瑣碎，只是使用的位置是：絕對或負利潤率的#header：

#wrapper {positioN:relative;padding-top:100px;} 
#header {position:absolute;top:0;width:100%;height:100px;} 
#nav {display:inline-block;width:25%;} 
#sales {display:inline-block;width:75%;} 
#products {margin-left:25%;} 
#footer {}

http://jsfiddle.net/FZTj7/1/

而那些內聯塊可以切換到浮動狀態，以使#nav可以在產品塊的頂端下方移動：

#wrapper {positioN:relative;margin:20px;padding-top:100px;} 
#header {position:absolute;top:0;width:100%;height:100px;} 
#nav {float:left;width:25%;} 
#sales {float:left;width:75%;} 
#products {margin-left:25%;} 
#footer {clear:left;}

http://jsfiddle.net/FZTj7/2/

來源

2012-11-23 13:20:14 gkond