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

Question

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

我在另一个div里面有两个div.我希望两个div在同一级别上,一个向左浮动,另一个向右浮动.但除非我在父母身上使用position: absolute,否则他们不会进入父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

你margin-left的#content应该包括宽度#left_menu.应该如此

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

您也不需要position:absolute为您#main(除非其他目的)

最后:

<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 是要清除并将底部内容从浮子上推下来.