反向HTML佈局

我會盡量保持這個簡短而具體，因爲我可以。反向HTML佈局

這是我需要顯示：

----------------------------------------- 
#div1 
----------------------------------------- 
----------------------------------------- 
#div2 
-----------------------------------------

這就是我需要的HTML結構爲：

<div id="div2">...</div> 
<div id="div1">...</div>

我之所以需要第二個div是在HTML更高結構是因爲當在Firefox中打印頁面時，我必須使用包含在「div2」中的圖像的固定位置。如果「div2」不在結構的頂部，圖像將打印在第二頁上，因此無法使用固定位置移動到第一頁（據我所知）。

我不能爲我的生活考慮如何使用CSS2（也許CSS3？）做到這一點。我也看過「任何訂單欄」，但我不認爲這將工作，因爲我正在處理行，而不是列。

任何幫助，將不勝感激:)

編輯：＃DIV2可以因爲＃DIV1需要能夠摺疊，因此＃DIV2需要遵循不被絕對定位。

來源

2012-03-01 judehall

我還是沒有看到一個可以使用它的實際案例。如果你必須做出這種改變來適應別的東西，現在是時候去改變別的東西了。無論如何，如果你需要的話，你可以用Javascript來交換他們的內容。 – Purag 2012-03-01 18:07:33

元素高度是否固定？ – MyStream 2012-03-01 18:07:43

如果div2中的圖像是固定位置的，爲什麼它必須是第一個？你不能指定固定定位的左和右屬性嗎？ – dangerChihuahua007 2012-03-01 18:08:11

爲此，您可以使用css3 display:box屬性。像這樣寫：

.outer{ 
    -moz-box-direction: reverse; 
    -moz-box-orient: vertical; 
    display: -moz-box; 
}

入住這http://jsfiddle.net/phSfD/2/

來源

2012-03-01 18:45:26 sandeep

事實證明，你的方法在這種情況下對我更好:)非常感謝你@sandeep – judehall 2012-03-02 14:52:02

很高興幫助:) – sandeep 2012-03-02 15:35:46

+1 ，這很酷。可能注意到這裏的-moz內容反映了W3C工作草案的[舊版本]（http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/）。 [最近版本]（http://www.w3.org/TR/css3-flexbox/）完全不同，所以將這個特定於瀏覽器的CSS稱爲css3可能更合適。 – 2012-03-02 19:41:20

解決此問題的一種方法是設置兩個div的絕對定位。你需要有一個父母relative位置，然後設置兩個div的絕對位置：div1上方的div2。

當您這樣做時，請記住在<style>標記中指出這些樣式僅適用於屏幕上的渲染並提供一組單獨的樣式進行打印，因此打印div會出現在div2下方。

來源

2012-03-01 18:10:10

當您在元素上設置position: fixed時，它將相對於瀏覽器窗口進行定位，與其容器無關。

所以，這

#div1 img{ position: fixed }

這

#div2 img{ position: fixed }

將呈現相同的結果。你可以按任何順序寫。

來源

2012-03-01 18:20:14 Bojack

你可以這樣做。

HTML：

<div class="outer"> 
    <div class="a"> [div a] </div> 
    <div class="b"> [div b] </div> 
</div>

CSS：

.outer { position:relative; } 
.a { position:absolute; top:100%; }

測試出來：http://jsfiddle.net/phSfD/1/

這種方法的好處是，你並不需要了解的任何元素的大小爲它工作。

這是可行的，因爲外部元素的高度取決於其內容的高度。由於div A是絕對定位的，因此它不會影響其容器的高度，因此容器的高度與div B的高度相同。將A的top設置爲100%（容器的高度）意味着它將出現在容器的正下方（因此剛好在div B之下）。

來源

2012-03-01 18:28:33

謝謝soo非常:)問題解決了謝謝你！ – judehall 2012-03-01 18:45:18

這樣就不可能在'outer'容器之後放置一些東西，因爲它會被其絕對定位的子元素重疊。 – 2012-03-01 18:50:37

沒問題。 @MaratTanalin如果你喜歡，你可以用'margin-top'代替'top'，它不會影響頁面的佈局。 – 2012-03-01 18:52:35

您可以使用任意的高度塊的垂直重新排序display: table-*-group特性（特別是動態調整）：

<style> 
#example {display: table; width: 100%; } 

/* Will display at the bottom of pseudo-table */ 
#block-1 {display: table-footer-group; } 

/* Will display in the middle */ 
#block-2 {display: table-row-group; } 

/* Will display at the top */ 
#block-3 {display: table-header-group; } 
</style> 

<div id="example"> 
    <div id="block-1">First</div> 
    <div id="block-2">Second</div> 
    <div id="block-3">Third</div> 
</div>

適用於所有的瀏覽器包括IE8 +（在IE8中有一個小的限制）。

對於IE6/7（如果它們確實重要），可以使用JavaScript交換元素。

有關詳細信息，請參閱我的article。

來源

2012-03-01 18:48:23

回答

相關問題