CSS：如何在另一个div中获取两个浮动div [英] CSS: how to get two floating divs inside another div

问题描述

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

I'm sure this a common problem, but couldn't find the exact answer :)

我有两个div在另一个div。我想让两个div在同一水平，一个浮动在左边，另一个在右边。但是他们不会进入父div，除非我在父级使用 position：absolute 。但是，孩子div不会保持在同一水平：S

I have two divs inside another div. I want the two divs to be on the same level, one floating to the left and the other to the right. But they won't get inside the parent div unless I use position: absolute on the parent. But then the child-divs won't stay on the same level :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>

推荐答案

您的 margin-left > #content 应包含 #left_menu 的宽度。因此应为

your margin-left of #content should include the width of #left_menu. Thus should be

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

您也不需要

You also don't need a position:absolute for your #main (unless other purposes)

所以最终： #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 是清除浮动内容的底部内容。

.c is to clear and pushes the bottom content off the floats.

这篇关于CSS：如何在另一个div中获取两个浮动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！