Question

我在css中有三个DIVS，在一个DIV中。当父div中div的值扩展时，我还有另外两个DIVS，所以父母应该让他自己也扩展，这不是这样的。

它只是扩展了内部DIVS，而不是父代DIVS，这是我的代码：

<div style="background-color:#000; color:#FFFFFF;
width:444px; height: auto;">

    <div align="left" style="margin-top:10px; width:90px;
    height:auto; background-color:#FFF; float:left;
    color:#FF3; margin:5px 5px;">
        Lable:
    </div>

    <div style="margin-top:10px; width:330px;
    height:auto; margin:5px 5px; background-color:#FFF; float:right; color:#FF3; border:solid 1px #000;">
        In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the
    </div>

</div>

Answer 1

使用overflow到parent元素，因为你的孩子divs浮动：

<div style="overflow: hidden; background-color:#000; color:#FFFFFF; width:444px; height: auto;">

或代替

使用

float:left;

for childs

display: inline-block;

Answer 2

完成。这是jsfiddle链接你需要添加风格

overflow:hidden

到父div。

Answer 3

你必须清除浮子。在结束主div之前添加它

<div style="clear:both;height:0px; width:0px">&nbsp;</div>

jsfiddle

Answer 4

试试这个，

<div style="background-color:#000; color:#FFFFFF;width: auto; height: auto;position: absolute;">

<div align="left" style="margin-top:10px; width:90px;
height:auto; background-color:#FFF; float:left;
color:#FF3; margin:5px 5px;">
    Lable:
</div>

<div style="margin-top:10px; width:330px;
height:auto; margin:5px 5px; background-color:#FFF; float:right; color:#FF3; border:solid 1px #000;">
    In here goes the value of the In here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the value of theIn here goes the vae value of the
</div>
</div>

两个嵌套的div可以扩展但不能扩展父级

4 个答案: