Question

我的问题是嵌套的div（'content'）不会根据真实内容调整他的身高，在本例中是我的表单。所以前者的div适应了他的身高，但是后者的div并没有这样做。我怎么解决这个问题？

HTML：

<div id='container'>
    <div class='content'>
        <form action="#" id="admin_form">
           <input type="text" class="input350" name="status" />
           <input type="text" class="input350" name="tlt" />
           <br>
           <input type="text" class="input350"  name="msg" />
           <input type="submit" class="input350" style="float:left;" value="Admin" />
        </form>
    </div>
</div>

CSS：

 #container
    {
        position: absolute;
        width: 900px;
        height: auto;
        border:solid 4px #1FC3D2;

    }

#container .content
    {
        position: relative;
        background-color: #EFEFEF;
        width: 898px;
        height:auto;
        border:solid 1px #000;
    }

Answer 1

表单的最后一个输入是浮动的。浮动元素不会拉伸其父级的高度。

在表单后添加：

<div style="clear:both;"></div>

Answer 2

从提交按钮中删除float:left并添加此css

input[type="submit"]{
 display:block   
}

<强> DEMO

适应嵌套Divs以下内容

2 个答案: