反转div子元素的顺序

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创建了一个demo: http://jsfiddle.net/E7cVs/2/

10 个解决方案

#1

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

#2

The modern answer is

现代的答案是

#parent {
  display: flex;
  flex-direction: column-reverse;
}

#3

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])
}

Demo: http://jsfiddle.net/t6q44/5/

演示:http://jsfiddle.net/t6q44/5/

#4

<style>
#parent{
    display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;
}
</style>

#5

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来实现这一点，但是有一些重要的注意事项。试着用下列方法之一，但都有自己的背:

1. 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.
2. 你的div。这只在元素水平显示时有效。它也将你的元素向右移动。一旦您清除它们或将它们返回到正常的文档流，订单将恢复。
3. By using absolute positioning. This is tricky for elements that do not have a defined height.
4. 通过使用绝对定位。这对于没有定义高度的元素来说很棘手。

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.

绝对位置将打破常规文档流中的元素，并允许您按照自己的选择进行精确定位。这是一个小提琴演示。

#6

Here's a simpler, more portable, fully prefixed take on @vals answer. Note that CSS3 2D Transforms only have 94% support as of February 2017.

这里有一个更简单，更便携，完全预设的对@vals的回答。注意到CSS3 2D transform到2017年2月只有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>

#7

display: table-header-group; display: table-footer-group;

显示:table-header-group;显示:table-footer-group;

for children

对于孩子们来说

display: table;

显示:表;

for parent

为父

#8

To build on flex answers presented elsewhere here, here is a complete cross-browser solution as per Autoprefixer:

要在这里的其他地方构建flex答案，这里是一个完整的跨浏览器解决方案，每个自动修复程序:

#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;
} 

#9

This is another way. Enjoy!

这是另一种方式。享受吧!

#parent{
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
}

#parent div:nth-child(1){
    order: 4;
}
#parent div:nth-child(2){
    order: 3;
}
#parent div:nth-child(3){
    order: 2;
}
#parent div:nth-child(4){
    order: 1;
}

<div id="parent">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

#10

Use abosolute positioning and top left

使用较高的位置和左上角