html - div 中的内容

Question

这就是我在 HTML 中配置 div 的方式

<div id="wrapper"><div id="content"><div id="details-middle" class="box">
..........content.........
</div></div></div>

这是 div 的 css

#wrapper {
    border-radius: 12px;
font-size:13px;
line-height:140%;
width:1008px;
margin:0 auto;
    margin-top: 15px;
    margin-bottom:15px;

}
#content {
margin-left:20px;
width:1008px;
    }
#details-middle
{
float:left;
width:700px;

}
.box {border: 1px solid #CCC;
border-radius:12px;
margin-bottom:7px; 
padding:10px 12px;
background-color: #FFF;
}

一切都显示在 div 的 ..

Answer 1

您正在 float details-middle，这意味着非 float 元素不会为其腾出空间，除非它们本身是 float 的，或者您clear the float .

我的首选解决方案是给父级 overflow: hidden; 这将迫使父级为其 float 的子级腾出空间:

#content
{
    margin-left:20px;
    width:1008px;
    overflow: hidden; /* change here */
}