html - 显示第二个元素第一个（CSS）

Question

我的代码如下：

<div class="item">
<div class="img">Hello this is img</div>
<div class="text">Hello this is text</div>
</div>

我希望它显示为

你好这是文本
你好是img

我希望在不重新排序代码的情况下实现这一目标。最好用css。有任何想法吗？

Answer 1

   .item .text{float:left;display:inline;}
   .item .img{display:inline}

尝试使用 css3transform进行垂直对齐

     .item .text{-webkit-transform:translateY(-100%);transform:translateY(-100%);}
      .item .img{-webkit-transform:translateY(100%);transform:translateY(100%);}

小提琴 - http://jsfiddle.net/6B7qt/4/

Answer 2

执行此操作的复杂方法是​​使用CSS flexbox。

.item { display: flex; flex-direction: column; }
.text { order: -1; }

http://jsfiddle.net/gKmwV/1/

但是，IE目前不支持此功能，因此您必须使用一些技巧。不确定没有 JS 是否有通用解决方案。

Answer 3

不是最干净的方式，但你总是可以使用绝对定位：

.item {
    position: relative;
    width:500px;
}

.text {
    position: absolute;
}

.img {
    position: absolute;
    top: 20px;
}

只是为了记录，我会考虑使用一些简单的 Javascript，但这是一个肮脏的 hack :)

Answer 4

CSS2.1方式（例子）：

.item { display: table; }
.img { display: table-footer-group; }

仅在 IE7- 中不起作用。但是，一些 CSS 属性（如边距、边框等）不适用于带有 的元素display: table-*-group，因此可能需要额外的包装器。