html - 如何在一组具有 float :left on them? 的框中控制框的顶部边距

Question

代码:

<div class="container">
<div class="box box1">
    1
</div>
<div class="box box2">
    2
</div>
<div class="box box3">
    3
</div>
<div class="box box4">
    4
</div>
</div>

.container {
    width: 960px;
    height: 1000px;
}
.box {
    width: 470px;
    background: #333333;
}
.box1 {
    float: left;
    height: 498px;
        color: #ffffff;
    font-size: 30px;
    text-align: center;
}
.box2 {
    float: left;
    margin-left: 20px;
    height: 589px;
        color: #ffffff;
    font-size: 30px;
    text-align: center;
}
.box3 {
    float: left;
    height: 446px;
    margin-top: 20px;
        color: #ffffff;
    font-size: 30px;
    text-align: center;
}
.box4 {
    float: left;
    margin-left: 20px;
    height: 529px;
    margin-top: 20px;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
}

fiddle :http://jsfiddle.net/hrAWn/

如何在不使用负上边距的情况下使第 3 个框向上移动，使其与第 1 个框之间的距离为 20 像素？我可以使用负边距实现我想要的效果，但我不喜欢使用负边距，所以我想看看是否有一种方法可以在不使用负边距的情况下将其向上移动。关于如何实现它的任何想法，或者我是否必须使用负顶部？

Answer 1

只需将框 #2 更改为 float:right。