html – 颠倒div的孩子的顺序

概述如何使用纯CSS来扭转div的孩子的顺序？ 例如： 我想要 <div id="parent"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div> 显示为： DCBA 我在JSfiddle上创建了一个演示： http://jsfiddle.net/E7cVs/2/ 有点棘手,但可以工作;只 如何使用纯CSS来扭转div的孩子的顺序？

例如：

我想要

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

显示为：

DCBA

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

解决方法 有点棘手,但可以工作;只是给你的想法：

div#top-to-bottom {    position: @R_404_4613@;    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轴,但是孩子们自己又头顶起来.

demo

总结

以上是内存溢出为你收集整理的html – 颠倒div的孩子的顺序全部内容，希望文章能够帮你解决html – 颠倒div的孩子的顺序所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。