Html 如何根据上边距对齐右容器和左容器？

我有以下代码：

html:

---

就页边距顶部而言，

.right

div与

.left

div不对齐。

.right

div显示在

.left

div的下方。如何对齐它，使

.right

div与

对齐。left

div仅在页边距顶部对齐？

由于浮动的工作原理，

.right

div由

.panel

div推动，而

.left

包含该div，因为它不是浮动的

一个简单的解决方案是将HTML中的

.right

div移到

.left

之前：

另一种方法是将

float:left

the

。left

div:

---

只需将

float:left

添加到左div即可。

是否将

float:left

添加到左div？

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

.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;
}

.left {
    float: left; /* ADD THIS */
    width: 600px;
    margin-right: 20px;
}