问个 CSS 问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3787 天前的主题，其中的信息可能已经有所发展或是发生改变。

现有布局，A与B的高度未知，宽度未知，A在上面，B在下面，结构也是A在B前面，如何在不改变结构的情况下，让A与B的位置调换？即B在上，A在下面；

用CSS方法实现优先考虑；

请指点，谢谢

CSS

调换

结构

14 条回复 • 2014-07-14 14:02:47 +08:00

Mcatt

2014-07-14 09:39:19 +08:00

position:absolute 定位？

jsonline

2014-07-14 09:43:04 +08:00 via Android

把AB的父容器用CSS3倒个个儿，再把AB分别倒个个儿。。。

pagecho

2014-07-14 09:45:30 +08:00 via iPhone

如果按一楼绝对定位，需要元素的高度啊，就需要用到js来协助了。
如果要纯css,楼主可以对这两个元素外面的大容器作180度旋转，然后对这两个元素作180旋转，就倒排了。之前v2ex上有个倒排li的帖子出现过这个方法。

ZhaoMiing

2014-07-14 10:05:19 +08:00

@pagecho +1 这种方法还可以用来做「卡片翻转」效果，不过在ie系下backface-visibility会有问题。

cutehalo

2014-07-14 10:27:40 +08:00

给A,B的父级加上-webkit-transform: rotate(180deg); 再分别给A,B加上-webkit-transform: rotate(180deg);
这样就行了XD

crs0910

2014-07-14 10:51:46 +08:00

ianva

2014-07-14 10:53:45 +08:00

lz 的项目如果不在意低级浏览器可以尝试 flexible，order 属性很轻松做到一切，现在在手机版的项目上用上了。
http://www.w3.org/html/ig/zh/css-flex-1/

jsonline

2014-07-14 10:55:51 +08:00 via Android

order 更靠谱。楼主给的条件不够清楚。

83f420984

2014-07-14 11:43:54 +08:00

@jsonline
@pagecho
谢谢，这思维太给力了

iamjs

2014-07-14 11:55:22 +08:00

@pagecho 记忆犹新。。秒杀js的回答

NemoAlex

2014-07-14 12:00:40 +08:00

@crs0910 这个方法有个问题：无法撑开容器
外层容器的高度会跟 B 一样，而 A 的高度又是未知的
这样如果 A 和 B 下面还有东西要放的话，就不太好弄了

L3au

2014-07-14 13:17:18 +08:00

仅考虑实现，还是flex
.container {
display: flex;
flex-direction: column-reverse;
}
http://www.w3cplus.com/css3/css3-flexbox-cheat-sheet.html

kmokidd

2014-07-14 14:02:08 +08:00

如果不需要兼容浏览器，受到之前一个CSS旋转1000个列表的问题的启发，可以把AB外层的容器旋转180度，再将AB分别旋转180度

jsfiddle: http://jsfiddle.net/QBEs4/

kmokidd

2014-07-14 14:02:47 +08:00

@cutehalo 啊啊sorry 没有看到已经有人用这个方法了= =