反向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

反向HTML布局

回答

相关问题