基本的HTML和CSS浮動問題

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 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/

不確定這是你在找什么。