反转HTML布局

Reverse HTML Layout

本文关键字：布局 HTML 反转      更新时间：2023-09-26

我会尽量简短具体。

这是我需要显示的：

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

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

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

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

我一辈子都无法想象如何用CSS2（也许是CSS3？）做到这一点。我还研究了"任意顺序列"，但我认为这不起作用，因为我处理的是行，而不是列。

如有任何帮助，我们将不胜感激：）

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

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

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

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

您可以这样做。

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

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

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

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

所以，这个

#div1 img{ position: fixed }

和这个

#div2 img{ position: fixed }

将呈现相同的结果。你可以按任何顺序写。

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

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

相关文章：