html - 颠倒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

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>

Answer 5

仅限 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 6

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

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

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

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

#parent div {
    float: right;
}

绝对位置将打破正常文档流中的元素，并允许您根据您的选择精确定位。这是一个小提琴演示。

Answer 7

这是对@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>

Answer 8

为了建立在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;
} 

Answer 9

这是另一种简单的现代方式。享受！

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

Answer 10

您可以使用 flex-direction 来反转元素。

flex-direction 属性接受四个可能的值：

row : same as text direction (default)
row-reverse : opposite to text direction.
column : same as row but top to bottom.
column-reverse : same as row-reverse top to bottom.

Answer 11

显示：表头组；显示：表页脚组；

为孩子

显示：表格；

为父母

Answer 12

使用绝对定位和左上角