CSS block 向左浮动

Question

我有这个html文件

    <div class="con" style="width:100px;height:200px;">
        1
    </div>
    <div class="con" style="width:100px;height:200px;">
        2
    </div>
    <div class="con" style="width:100px;height:400px;">
        3
    </div>
    <div class="con" style="width:100px;height:400px;">
        4
    </div>
    <div class="con" style="width:100px;height:100px;">
        5
    </div>
    <div class="con" style="width:100px;height:100px;">
        6
    </div>
    <div class="con" style="width:100px;height:100px;">
        7
    </div>
    <div class="con" style="width:100px;height:100px;">
        8
    </div>

我希望这个 html 有这个结果:

但是我写了这个 css:

<style>
body {
width:440px;
height:440px;
}
.con{
float:left;
background:#bebebe;
margin:1px;
}
</style>

我得到了这个结果! :-(

我重复一遍，我将只使用我编写的 html 代码得到第一张图片的结果。

Answer 1

将 body 的 width 更改为 408px; 然后 float:right; div 3 & 4 .

演示: http://jsbin.com/imire5

只向左浮动的更新演示: http://jsbin.com/imire5/2