javascript - 反向 HTML 布局

Question

我会尽量保持简短和具体。

这是我需要显示的内容:

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

这就是我需要的 HTML 结构:

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

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

我这辈子都想不出如何使用 CSS2(也许是 CSS3？)来做到这一点。我还研究了“任何订单列”，但我认为这行不通，因为我处理的是行，而不是列。

任何帮助将不胜感激:)

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

Answer 1

为此，您可以为此使用 css3 display:box 属性。像这样写:

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

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