如何根據頂部邊界將正確的容器與左側容器對齊？

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格對齊。 .right div顯示在.left div以下。我如何對齊它，以便.right div與.left div 只有在邊距方面對齊？

Answer 1

由於彩車如何工作，在.right DIV由.left包含，因爲它不浮動的.panel DIV推。

一個簡單的解決方案是.right DIV 之前.left移動在HTML：http://jsfiddle.net/sRVDW/

另一種是float: left的.left格：http://jsfiddle.net/sRVDW/1/

Answer 2

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

只需添加float: left你的左邊股利。