CSS:如何在另一个div中获得两个 float div

Question

我确定这是一个常见问题，但找不到确切的答案:)

我在另一个 div 中有两个 div。我希望两个 div 在同一水平面上，一个向左浮动，另一个向右浮动。但除非我在父级上使用 position: absolute，否则它们不会进入父级 div。但随后子 div 将不会保持在同一水平:S

#main {    margin-left: 30px;    margin-top: 20px;    position: absolute;}#left_menu {    width: 150px;    float: left;}#content {    margin-left: 20px;    float: right;    border: 1px solid white;}    <div id ="main">    <div id ="left_menu>&blablabal</div>    <div id ="content">blablb</div>    </div>

Answer 1

#content 的 margin-left 应该包括 #left_menu 的宽度。因此应该是

#content {
    margin-left: 170px;
    /* float: right; */ /* no need for a float here */
    border: 1px solid white;
}

您的 #main 也不需要 position:absolute(除非有其他用途)

最后:

<style type="text/css"><!--
#main {
    margin-left: 30px;
    margin-top: 20px;
}

#left_menu {
    width: 150px;
    float: left;
}

#content {
    margin-left: 170px;
    border: 1px solid white;
}
.c{clear:both;}
--></style>
    <div id="main">
    <div id="left_menu>&amp;blablabal</div>
    <div id="content">blablb</div>
    </div>
    <div class="c"></div>

.c 用于清除 float 底部的内容。