Question

在以下示例中也可以找到：http://jsfiddle.net/vqBLX/1/有没有办法让块“六”浮动到右列的顶部而不改变它在html中的位置？

代码示例：

#container{width:200px; backgroung:#ccc;}
.box{width:110px; height:100px; background-color:red;}
.one, .two, .three, .four, .five{float:left}
.six{float:right; background-color:blue; width:90px;}

<div id="container">
    <div class="box one"> </div>
    <div class="box two"> </div>
    <div class="box three"> </div>
    <div class="box four"> </div>
    <div class="box five"> </div>
    <div class="box six"> </div>
</div>

Answer 1

不使用绝对或相对定位。你可以把它放在第二位并向左漂浮。或者先把它放好吧。

要绝对定位，请将#container设置为position: relative。将方框6设置为position: absolute; top: 0; right: 0

或者使用其他人建议的保证金理念。

Answer 2

您可以添加：

position: relative; top: -400px;

到CSS中的.six课程。

Answer 3

不是最好的答案，但它确实有效：

.six{float:right; background-color:blue; width:90px; margin-top: -400px;}

Answer 4

.six{position: relative; left:110px; top:0px; background-color:blue; width:90px;}

http://jsfiddle.net/vqBLX/9/

不确定这是你在想什么。

基本的HTML和CSS浮动问题

4 个答案: