反转HTML布局

Question

我会尽可能简短明了地表达。

这是我需要展示的内容：

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

这是我需要的HTML结构：

这是我需要的HTML结构：

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

我需要第二个div在HTML结构中更靠前的原因是，当页面在Firefox中打印时，我必须对包含在“div2”中的图像使用固定位置。如果“div2”不在结构的顶部，则该图像将打印在第二页上，因此无法使用固定位置移动到第一页（据我所知）。

我无法想象如何在CSS2中实现这一点（也许CSS3可以？）。我还研究了“任意顺序列”但我认为这不起作用，因为我处理的是行而不是列。

谢谢你的帮助 :)

编辑：#div2不能绝对定位，因为#div1需要能够折叠，因此#div2需要跟随。

- judehall

---

我仍然没有看到一个实际的案例可以使用这个。如果你必须做出这种改变以适应其他事情，那么是时候改变那些其他事情了。而且，在任何情况下，如果需要，你可以用Javascript交换它们的内容。 - Purag

元素的高度是固定的吗？ - MyStream

如果div2中的图像是固定定位的，为什么它必须首先出现？难道不能为固定定位指定左右属性吗？ - dangerChihuahua007

你可以使用绝对定位来定位div，除非你需要它们浮动？你总是可以使用打印CSS在打印之前覆盖样式。 - ckaufman

如果您知道div元素的大小，可以使用绝对定位将div2移动到div1下方。 - j08691

Answer 1

你可以像这样做。

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 的下方）。

- Dagg Nabbit

---

这样做是不可能在 outer 容器后面放置任何东西，因为它会被其绝对定位的子元素重叠覆盖。 - Marat Tanalin

没问题。@MaratTanalin 如果你愿意，你可以用 top 替换 margin-top，这不会对页面布局产生太大影响。 - Dagg Nabbit

绝对定位元素无论如何都会从正常流中移除。 - Marat Tanalin

事实证明，在这种情况下，@sandeep的CSS3方法对我更有效。使用绝对定位时遇到了一些问题，因为我需要body跟随折叠的div :) - judehall

Answer 2

你可以使用CSS3的display:box属性来实现这个。写成这样：

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

请检查这个http://jsfiddle.net/phSfD/2/

- sandeep

---

原来在这种情况下，你的方法对我更有效 :) 非常感谢 @sandeep - judehall

+1，这很酷。这里的-moz东西反映了W3C工作草案的旧版本。更近期的版本完全不同，因此将其称为特定于浏览器的CSS而不是CSS3可能更合适。 - Dagg Nabbit

Answer 3

一种解决方案是设置两个div的绝对定位。您需要一个具有相对定位的父元素，然后设置两个div的绝对位置：div1在div2之上。

在这样做时，请记得在

- Aleks G

Answer 4

当您在元素上设置position: fixed时，它被定位相对于浏览器窗口，而与其容器无关。

因此，这个

#div1 img{ position: fixed }

和这个

#div2 img{ position: fixed }

会呈现相同的结果。您可以以任何顺序编写它们。

- n a

Answer 5

您可以使用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交换元素。

有关详细信息，请参见我的文章。

- Marat Tanalin