CSS 布局，使用 CSS 重新排序 DIV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/624519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS layout, use CSS to reorder DIVs
提问by Ray Lu
Given that the HTML
鉴于 HTML
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
render as
呈现为
content 1
content 2
content 3
My question:
我的问题：
Is there a way to render it as below by using CSS only without changing the HTML part.
有没有一种方法可以通过仅使用 CSS 而不更改 HTML 部分来将其呈现如下。
content 1
content 3
content 2
采纳答案by nickf
It might not exactly match what you're after, but take a look at this question:
CSS positioning div above another div when not in that order in the HTML
它可能与您所追求的不完全匹配，但请看一下这个问题：
CSS 将 div 定位在另一个 div 上方，而不是按 HTML 中的顺序
Basically, you'd have to use Javascript for it to be reliable in any way.
基本上，您必须使用 Javascript 才能使其在任何方面都可靠。
回答by Luke H
This can be done in browsers that support the CSS3 flexbox concept, particularly the property flexbox-order.
这可以在支持CSS3 flexbox 概念的浏览器中完成，尤其是属性flexbox-order。
See here
看这里
However, support for this is only in current versions of most browsersstill.
但是，仅在大多数浏览器的当前版本中仍支持此功能。
EditTime moves on and the flexbox support improves..
编辑时间继续前进，对 flexbox 的支持有所改进。
回答by Marcin Robaszyński
This works for me: http://tanalin.com/en/articles/css-block-order/
这对我有用：http: //tanalin.com/en/articles/css-block-order/
Example from this page:
此页面的示例：
HTML
HTML
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
CSS
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 */
As stated there, this should work in most browsers. Check link for more info.
如上所述，这应该适用于大多数浏览器。检查链接以获取更多信息。
回答by justinbelcher
This is one of the classic use-cases for absolute positioning--to change rendering from source order. You need to know the dimensions of the divs to be able to do this reliably however, and if you don't javascript is your only recourse.
这是绝对定位的经典用例之一——从源顺序改变渲染。但是，您需要知道 div 的尺寸才能可靠地执行此操作，如果您不知道，javascript 是您唯一的资源。
回答by ndorfin
I was messing around in Firefox 3 with Firebug, and came up with the following:
我在使用 Firebug 的 Firefox 3 中搞砸了，并想出了以下内容：
<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>
It's not perfect, since you need to know the heights of each container, and apply that height value to the negative top margin of the last element, and the bottom margin of the first element.
这并不完美，因为您需要知道每个容器的高度，并将该高度值应用于最后一个元素的负上边距和第一个元素的下边距。
Hope it helps, nd
希望它有帮助，nd
回答by Andrew Hare
I got it to work by doing this:
我通过这样做让它工作：
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
but keep in mind that this will not work for you as soon as you have dynamic content. The reason I posted this example is that without knowing more specific things about your content I cannot give a better answer. However this approach ought to point you in the right direction as to using relative positioning.
但请记住，一旦您拥有动态内容，这将不适合您。我发布此示例的原因是，如果不了解有关您的内容的更多具体信息，我无法给出更好的答案。但是，这种方法应该为您指明使用相对定位的正确方向。
回答by Samir Talwar
One word answer: nope. Look into XSLT (XML Stylesheet Language Transforms), which is a language specifically geared towards manipulating XML.
一个字回答：没有。查看 XSLT（XML 样式表语言转换），这是一种专门用于处理 XML 的语言。
回答by Matthew James Taylor
If you know the height of each element then it is a simple case of vertical relative positioning to swap around the orders. If you don't know the heights then you either have to give them heights and allow the divs to get scroll bars if there is any overflow or calculate it all with JavaScript and add the relative positioning on-the-fly.
如果你知道每个元素的高度，那么它是一个简单的垂直相对定位来交换订单的情况。如果您不知道高度，那么您要么必须为它们提供高度并允许 div 在有任何溢出时获取滚动条，要么使用 JavaScript 计算所有这些并即时添加相对定位。
回答by meem
with jquery you can simply do:
使用 jquery，您可以简单地执行以下操作：
$('#content2').insertAfter($('#content3'));
I don't think there's a way to do it with CSS, except to force fixed positioning of each of the divs and stack them that way.
我不认为有办法用 CSS 做到这一点，除了强制每个 div 的固定定位并以这种方式堆叠它们。
