css - Div 未填充容器

Question

我对 CSS 有疑问。让我们假设以下结构

<div id='maincontainer'>
  <div id='item'>
     <div id='itemimage'> </div>
     <div id='itemtext'> </div>
  </div>
</div>

现在。对于数据库中的每个元素，它都会打印一个元素，以及相应的图像和文本。假设我的数据库中有 4 个元素。它打印第一个很好，第二个，但第三个和第四个打印出容器。

我的主容器有一个最小高度，它随着 itemdiv 的高度而延伸。但是在两个元素之后，它停止扩展。

你有什么想法吗？

#maincontainer {

    font-size:11px;
    font-family:Verdana;
    margin-top:60px;   
    margin-left:auto;
    margin-right:auto;
    min-height:50px;
    height:auto!important;
    overflow:hidden;
    width:650px;
    position:relative; 
    color:#465258;
    text-align:left;
    border:1px solid black;



}

#item  
{

    height:170px;
    width:650px;
    position:relative;
    clear:both;
}

#itemimage
{

    float:left;
    height:135px;
    width:200px;
    position:relative;
    clear:both;

}

#item_text
{

     color:#465258;
     width:435px;     
     margin-top:-135px;
     height:110px;   
     float:right;
     position:relative;
     padding-top:10px;
     padding-bottom:10px;
     clear:both;
}

Answer 1

为什么需要在 div 上设置高度？它应该只是垂直拉伸(stretch)以适应它的内容。除非您在元素上使用 float 并且不使用 float 清除方法包含它们。