html - 如何在顶部边距上将右侧容器与左侧容器对齐？

我有以下代码：
引用：

<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right"></div>
</div>

css:

.container {
    background-color: #000;
    margin: 130px auto;
    min-height: 320px;
    width: 940px;
    overflow: auto;
    padding: 0px 10px;
}
.left {
    width: 600px;
    margin-right: 20px;
}
.right {
    width: 320px;
    height: 300px;
    background-color: #999;
    float: right;
}
.panel {
    background-color: red;
}

就页边距顶部而言，.rightdiv与.leftdiv不对齐。.rightdiv显示在.leftdiv下面一点。我如何对齐它，以便.rightdiv与.leftdiv仅按边距顶部对齐？

最佳答案

由于float是如何工作的，.rightdiv由.panel包含的.leftdiv推动，因为它不是浮动的。
一个简单的解决方案是在HTML中的.right之前移动.leftdiv：http://jsfiddle.net/sRVDW/
另一个是float: left分区：http://jsfiddle.net/sRVDW/1/