如何根据上边距将右侧容器与左侧容器对齐？

Question

我有以下代码：

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

.right div在保证金最高限额方面与.left div不对齐。 .right div显示低于.left div的位置。如何对齐它以使.right div与边距顶部的.left div 仅对齐？

Answer 1

由于浮点数如何工作，.right div被.panel包含的.left div推，因为它没有浮动。

一个简单的解决方案是在HTML中移动.right div .left：http://jsfiddle.net/sRVDW/

另一个是float: left .left div：http://jsfiddle.net/sRVDW/1/

Answer 2

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

只需将float: left添加到您的左侧div。