CSS布局,使用CSS对div重新排序[重复]

这可以在支持 CSS3 flexbox concept flexbox-order .

看见 here

only in current versions of most browsers 还

随着时间的推移,flexbox的支持也有所改善。。

这对我很有用: http://tanalin.com/en/articles/css-block-order/

HTML

<div id="example">
  <div id="block-1">First</div>
  <div id="block-2">Second</div>
  <div id="block-3">Third</div>
</div>

CSS

#example {display: table; width: 100%; }

#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group;    } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */

如前所述,这应该适用于大多数浏览器。查看链接了解更多信息。

CSS positioning div above another div when not in that order in the HTML

基本上,您必须使用Javascript才能使其在任何方面都可靠。

这是绝对定位的经典用例之一——从源代码顺序更改渲染。但是,您需要知道div的维度才能可靠地做到这一点,如果不知道,javascript是您唯一的求助工具。

我在Firefox3中与Firebug混在一起,并得出以下结论:

<div>
  <div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
  <div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
  <div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>

这并不完美,因为您需要知道每个容器的高度,并将该高度值应用于最后一个元素的负上边距和第一个元素的下边距。

我是通过这样做来实现的:

#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }

但请记住,一旦你有了动态内容,这将不会对你起作用。我发布此示例的原因是,如果不了解有关您内容的更多具体信息,我无法给出更好的答案。然而,这种方法应该为您指出使用相对定位的正确方向。

一个词回答:不。看看XSLT(XML样式表语言转换),这是一种专门用于处理XML的语言。

如果您知道每个元素的高度,那么在订单周围交换是垂直相对定位的简单情况。如果你不知道高度,那么你要么给他们高度,如果有任何溢出,允许div获得滚动条,要么用JavaScript计算,并动态添加相对位置。

$('#content2').insertAfter($('#content3'));