Question

我有一个包含两个div的'frame'，它们分别在左边和右边对齐。不幸的是，主div没有合适的高度来使内部div成为可能。

这是HTML：

<div id="frm">
   <div id="a">aaa<br>aaa</div>
   <div id="b">bbb</div>
</div>

和CSS：

#frm {
    background: red;
    width: 100%;
    height: auto;
}

#a {
    background: blue;
    float: left;    
}

#b {
    background: green;
    float: right;
}

这是JsFiddle：http://jsfiddle.net/mPH4H/

我应该看到一个红框，但没有。

Answer 1

浮动元素将从文档流中删除，因此父容器认为它内部没有任何内容。您可以将overflow:auto添加到#frm的CSS规则中，以便将背景带回来并“包含”浮动的子项：

#frm {
    background: red;
    width: 100%;
    height: auto;
    overflow:auto;
}

<强> jsFiddle example

Answer 2

overflow:hidden;会为#frm

提供高度

尝试：

#frm {
    background: red;
    width: 100%;
    height: auto;
    overflow:hidden;
}

DEMO here.

OR

Clear floats：

HTML：

<div id="frm">
    <div id="a">aaa<br>aaa</div>
    <div id="b">bbb</div>
    <div class="clr"></div>
</div>

CSS：

.clr{clear:both;}

DEMO here.

Answer 3

我认为这样做很好：

#frm {
    background: red;
    width: 100%;
    height: auto;
}

#a {
    background: blue;
    width: 50%;
    float: left;    
}

#b {
    background: green;
    width: 50%;
    float: right;
}

包含其他div的Div没有适当的高度

3 个答案: