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}

尝试使用css3 transform进行垂直对齐

     .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 does not support this目前，所以你将不得不使用一些黑客。如果没有JS，不确定是否可以使用通用解决方案。

Answer 3

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

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

.text {
    position: absolute;
}

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

只是为了记录，我会看一下使用一些简单的Javascript，但这是一个肮脏的黑客:)

Answer 4

CSS2.1方式（example）：

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

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

显示第2个元素1st（CSS）

4 个答案: