颠倒div的孩子的顺序

Question

你如何用纯CSS扭转div的孩子的顺序？

例如:

我想要

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

显示为:

D

C

B

A

我在JSfiddle上创建了一个演示:http: //jsfiddle.net/E7cVs/2/

Answer 1

现代的答案是

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

Answer 2

有点棘手,但可以工作; 只是为了给你一个想法:

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

镜像在垂直轴上既是容器又是孩子.孩子们沿着容器的倒y轴,但孩子们自己再次抬头.

演示

Answer 3

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

Answer 4

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

演示: http ://jsfiddle.net/zA4Ee/3/

Javascript解决方案:

var parent = document.getElementsByClassName('top-to-bottom')[0],
    divs = parent.children,
    i = divs.length - 1;

for (; i--;) {
    parent.appendChild(divs[i])
}

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

Answer 5

您可以使用纯 CSS 来做到这一点，但有一些重要的警告。尝试使用以下方法之一，但两者都退缩了：

1. 正确浮动您的 div。这仅在您的元素水平显示时才有效。它还会将您的元素向右移动。一旦您清除它们或将它们返回到正常的文档流，订单就会恢复。
2. 通过使用绝对定位。这对于没有定义高度的元素来说很棘手。

向右浮动将反转它们水平显示的顺序。这是一个 jsFiddle 演示。

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

#parent div {
    float: right;
}

绝对位置将从正常文档流中分离出元素，并允许您按照您的选择精确定位。这是一个小提琴演示。

Answer 6

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>