现有布局，A与B的高度未知，宽度未知，A在上面，B在下面，结构也是A在B前面，如何在不改变结构的情况下，让A与B的位置调换？即B在上，A在下面；
用CSS方法实现优先考虑；
请指点，谢谢
用CSS方法实现优先考虑；
请指点，谢谢
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 4497 days ago, the information mentioned may be changed or developed.
 |
McattJul 14, 2014
1
position:absolute 定位？
|
 |
2
把AB的父容器用CSS3倒个个儿，再把AB分别倒个个儿。。。
|
1 |
3
如果按一楼绝对定位，需要元素的高度啊，就需要用到js来协助了。
如果要纯css,楼主可以对这两个元素外面的大容器作180度旋转，然后对这两个元素作180旋转，就倒排了。之前v2ex上有个倒排li的帖子出现过这个方法。 |
 |
5
给A,B的父级 加上-webkit-transform: rotate(180deg); 再分别给A,B加上-webkit-transform: rotate(180deg);
这样就行了XD |
 |
6
<script src="https://gist.github.com/qusiba/cebe258e76cbcb6aba66.js"></script>
|
 |
7
lz 的项目如果不在意低级浏览器可以尝试 flexible，order 属性很轻松做到一切，现在在手机版的项目上用上了。
http://www.w3.org/html/ig/zh/css-flex-1/ |
|
jsonlineJul 14, 2014 via Android
8
order 更靠谱。楼主给的条件不够清楚。
|
 |
11
|
 |
12
仅考虑实现，还是flex
.container { display: flex; flex-direction: column-reverse; } http://www.w3cplus.com/css3/css3-flexbox-cheat-sheet.html |
 |
13
如果不需要兼容浏览器，受到之前一个CSS旋转1000个列表的问题的启发，可以把AB外层的容器旋转180度，再将AB分别旋转180度
jsfiddle: http://jsfiddle.net/QBEs4/ |
Select Language