Html 反转 div 的孩子的顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16918693/
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
reverse the order of div's children
提问by Angelo A
How can you reverse the order of a div's children with pure CSS?
如何使用纯 CSS 颠倒 div 子项的顺序？
For example:
例如：
I want
我想要
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
to be displayed as:
显示为：
D
C
B
A
I've created a demo on JSfiddle: http://jsfiddle.net/E7cVs/2/
我在 JSfiddle 上创建了一个演示：http: //jsfiddle.net/E7cVs/2/
回答by Pbrain19
The modern answer is
现代的答案是
#parent {
display: flex;
flex-direction: column-reverse;
}
回答by vals
A little bit tricky, but can work; just to give you the idea:
有点棘手，但可以工作；只是为了给你这个想法：
div#top-to-bottom {
position: absolute;
width:50px;
text-align: left;
float: left;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
div#top-to-bottom > div {
width: 50px;
height: 50px;
position: relative;
float: right;
display: block;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
mirror in the vertical axis both the container and the childs. The childs follow the inverted y axis of the container, but the children themselves are again head up.
在垂直轴上镜像容器和孩子。孩子们跟随容器的倒 y 轴，但孩子们自己再次抬头。
demo
演示
回答by Halit YE??L
<style>
#parent{
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
</style>
回答by banzomaikaka
CSS only solution:( I switched all selectors to class selectors as to not deal with specificity issues that could occur. Just an habit of mine and others. I've also removed styles not relevant to the example. )
仅 CSS 解决方案：（我将所有选择器切换为类选择器，以不处理可能发生的特殊性问题。这只是我和其他人的习惯。我还删除了与示例无关的样式。）
.top-to-bottom {
position: absolute;
}
.child {
width: 50px;
height: 50px;
margin-top: -100px; /* height * 2 */
}
.child:nth-child(1) {
margin-top: 150px; /* height * ( num of childs -1 ) */
}
.a {
background:blue;
}
.b {
background:red;
}
.c {
background:purple;
}
.d {
background:green;
}
Demo:http://jsfiddle.net/zA4Ee/3/
演示：http : //jsfiddle.net/zA4Ee/3/
Javascript solution:
Javascript 解决方案：
var parent = document.getElementsByClassName('top-to-bottom')[0],
divs = parent.children,
i = divs.length - 1;
for (; i--;) {
parent.appendChild(divs[i])
}
回答by Mohamad
You can do this with pure CSS, but there are major caveats. Try using one of the following methods, but both have draw their backs:
您可以使用纯 CSS 来做到这一点，但有一些重要的警告。尝试使用以下方法之一，但两者都退缩了：
- Floating your divs right. This will only work if your elements appear horizontally. It will also shift your elements to the right. As soon as you clear them or return them to the normal document flow, the order will revert.
- By using absolute positioning. This is tricky for elements that do not have a defined height.
- 正确浮动您的 div。这仅在您的元素水平显示时才有效。它还会将您的元素向右移动。一旦您清除它们或将它们返回到正常的文档流，订单就会恢复。
- 通过使用绝对定位。这对于没有定义高度的元素来说很棘手。
Floating right will reverse the order in which they're displayed horizontally. Here's a jsFiddle demo.
向右浮动将反转它们水平显示的顺序。这是一个 jsFiddle 演示。
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
#parent div {
float: right;
}
Absolute position will break out the elements from the normal document flow and allow you to position then precisely as you choose. Here's a fiddle demo.
绝对位置将从正常文档流中分离元素，并允许您按照您的选择精确定位。这是一个小提琴演示。
回答by mehul
100% work this code:
100% 使用此代码：
<style type="text/css">
.wrapper {
display: flex;
flex-direction: column-reverse;
}
</style>
<div class="wrapper">
<div class="main">top</div>
<div class="footer">bottom</div>
</div>
回答by Lachmanski
Here's a simpler, more portable, fully prefixed take on @vals answer. Note that CSS3 2D Transformsonly have 94% support as of February 2017.
这是一个更简单、更便携、完全前缀的@vals 答案。请注意，截至 2017 年 2 月，CSS3 2D 变换仅获得 94% 的支持。
.reverse, .reverse>* {
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}<div class="reverse">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>回答by MQuiggGeorgia
To build on flexanswers presented elsewhere here, here is a complete cross-browser solution as per Autoprefixer:
为了建立在flex此处其他地方提供的答案的基础上，这里有一个完整的跨浏览器解决方案，根据Autoprefixer：
#parent {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
回答by Z.Dima
This is another easy modern way. Enjoy!
这是另一种简单的现代方式。享受！
#parent{
/* Just set display flex to parent div */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/* Use this part if you need also a column direction */
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
/* This way you can decide the order of the internal divs */
#parent div:nth-child(1){
-webkit-order: 4;
-ms-order: 4;
order: 4;
}
#parent div:nth-child(2){
-webkit-order: 3;
-ms-order: 3;
order: 3;
}
#parent div:nth-child(3){
-webkit-order: 2;
-ms-order: 2;
order: 2;
}
#parent div:nth-child(4){
-webkit-order: 1;
-ms-order: 1;
order: 1;
}
<div id="parent">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>回答by TeT Psy
display: table-header-group; display: table-footer-group;
显示：表头组；显示：表页脚组；
for children
为孩子
display: table;
显示：表；
for parent
给父母
