首页 文章

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

提问于
浏览 次
2

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

我在另一个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>
css

7 回答

  • 5

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

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

    你_974885_也不需要 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 是清除并将浮动的底部内容推出 .

    回复于
  • 1

    这与你的容器宽度有关 .

    这对我有用 .

    <style type="text/css"><!--
        .Content{
        Width:100%;
        }

        .FloatLeft{
        float:left;
        }
        .FloatRight{
        float:Right;
        }
-->
    </style>

        <div class="Content">
        <div class="FloatLeft"></div>
        <div class="FloatRight"></div>
        </div>
    回复于
  • 0

    您将需要'float'主div，或在您的内容和左侧菜单 <div> 之后使用清除 <div> 或 <br> .

    回复于
  • 0

    问题不在于“保持在同一水平”，而是与容器div的大小有关 .

    这可能会对你有所帮助：http://archivist.incutio.com/viewlist/css-discuss/63079

    回复于
  • 0

    最好最简单的方法是在容器上设置 overflow: hidden ， #main . 我不认为这在IE6中有效 .

    回复于
  • 0

    尝试给主div一个 overflow: hidden; 并带走它的 position: absolute; ，它会给它一个相当于浮动div的更大高度的高度

    此外，我不知道你是否从你的页面复制了它，但你在left_menu id =“”中错过了一个近距离引用

    回复于
  • 2
    #main{
display:inline-block;
width:100%;
}

    并删除父母的绝对;

    #left_menu,#content{
 ....
 vertical-align:top;
}
    回复于

相关问题