html - 如何在上边距方面将右容器与左容器对齐？

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

div 在边距顶部与.rightdiv 不一致。.leftdiv 显示在div.right下方.left。我如何对齐它，以便div仅在边距顶部.right与 div 对齐？.left

Answer 1

由于浮动的工作方式，.rightdiv 被包含的 div 推动，.panel因为.left它没有浮动。

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

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

Answer 2

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

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