Question

我会尽量保持这个简短而具体。

这是我需要展示的内容：

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

这就是我需要HTML结构的方式：

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

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

我不能为我的生活想想我怎么能用CSS2（也许是CSS3？）来做到这一点。我也查看了“Any Order Column”，但我认为这不会起作用，因为我处理的是行，而不是列。

任何帮助将不胜感激：）

编辑：＃div2无法绝对定位，因为＃div1需要能够崩溃，因此＃div2需要遵循。

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

Answer 2

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

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

选中此http://jsfiddle.net/phSfD/2/

Answer 3

解决此问题的一种方法是设置两个div的绝对定位。您需要拥有relative位置的父级，然后设置两个div的绝对位置：div2上方的div1。

当您这样做时，请记住在<style>标记中指出这些样式仅适用于屏幕渲染并提供一组单独的打印样式，以便打印div将显示在div2下方

Answer 4

在元素上设置position: fixed时，无论其容器如何，它都相对于浏览器窗口定位。

所以，这个

#div1 img{ position: fixed }

和这个

#div2 img{ position: fixed }

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

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交换。

有关详细信息，请参阅我的article。

反向HTML布局

5 个答案: