html - 如何在第三个 div 中顶部对齐两个 div？

Question

我需要左 div 作为菜单，右作为内容。
我正在尝试采用这篇文章中公认的答案：
CSS：如何在另一个 div 中获取两个浮动 div

#container {width:900px;}
#left {
    width: 150px;
    float: left;
}
#right {
    width: 500px;    
    margin-left: 170px;
}
.clearBoth{clear:both;}

HTML

<div id="container">
<div id="left">leftMenu</div>
<div id="right">rightContent</div>
<div class="clearBoth"></div>
</div>

left 和 #right 应该顶部对齐，但 #right 在 #left 下方。

Answer 1

您是否也尝试过给正确的 div 一个浮点数？

#right {
width: 500px;    
margin-left: 170px;
float: left;
}

一个 jsfiddle 向你展示它的工作原理:)

http://jsfiddle.net/LtUzc/

Answer 2

试试这个

#container {width:900px;}
#left {
    width: 500px;
    float: left;
}
#right {
    width: 500px;    

float: left;

}
.clearBoth{clear:both;}    

<div id="container">
<div id="left">leftMenu</div>
<div class="clearBoth"></div>
<div id="right">rightContent</div>

</div>