Question

想象一下以下HTML代码：

   <html>
    ...
    <div id="stuff1">
        barbaz
    </div>

    <div id="stuff2">
        foobar
    </div>
    ...
   </html>

现在，假设我想利用CSS这样做 stuff2上方显示stuff1。有没有办法做到这一点不使用position: absolute而不更改HTML 码？

我尝试过这样使用float：

#stuff2 { float: left; }
#stuff1 { clear: left; }

但它没有成功。它与未使用时一样 float。

Answer 1

我成功地获得了第二个元素，但没有像你期望的那样在下一行中获得。

#stuff1{display:inline-block;/* or display: inline; */}
#stuff2{float:left;}

Working Fiddle

或

您还可以使用transform CSS3属性

#stuff1{
    background-color:red;
    transform: translate(0px, 100px);
    -webkit-transform: translate(0px, 100px);
    -moz-transform: translate(0px, 100px);
    -o-transform: translate(0px, 100px);
    -ms-transform: translate(0px, 100px);
}
#stuff2{
    background-color:green;
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
}

Working Fiddle

另请查看保罗爱尔兰网站，了解translate and positioning之间的效果图。

如果您不知道身高，请使用javascript or jQuery计算身高。

Answer 2

尝试以下css，可能是我们会帮助

#stuff2 { float: left;  margin-top: -40px; }   
#stuff1 { clear: left; margin-top: 30px; }

在预定义HTML时使用CSS更改div顺序

2 个答案: