父div如何根据孩子的身高自动调整身高？

Question

父div如何根据孩子的身高自动调整其高度？

div#main{
    width: 970px;
    height: 100px;
    background: rgba(255,0,0,1);
    border: 5px solid rgb(251,151,117);
    margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
    padding: 10px       
}
div#left{width: 383px;
    height: 100%; 
    margin-right: 5px;
    background: rgb(0,0,255);
    float:left
}
div#description{width: 100%; 
    height: 50%; 
    background: rgb(0,0,0)  
}
div#following{width: 100%; 
    height: 50%; 
    background: rgb(0,255,0)  
}
div#posts{width: 577px;
    height: auto;
    margin-left: 5px;
    background: rgb(255,255,0);
    float: right
}

<div id="main">
    <div id="left" class="cell">

        <div id="description" class="cell">
        </div>

        <div id="following" class="cell">
        </div>

    </div>

    <div id="posts" class="cell"> 
      there are some contents here (height is set to auto)
    </div> 
</div>

Answer 1

我为你做了一个very simple example，看看父高度的变化是多少。

.parent
{
    height: auto;
    border: 1px dashed #f00;
    padding: 5px;
}

.child
{
    height: 100px;
    border: 1px dashed #0f0;
}

<div class="parent">
    <div class="child">
    </div>
</div>

按照那里的东西，你会做得很好。

---

查看代码后，这是一个浮动问题，你必须在clear: both;底部添加一个新的div来清除浮点数并使#main div显示为填充。

Look at example here。

Answer 2

div#main{
         width: 970px;

         background: rgba(255,0,0,1);
         border: 5px solid rgb(251,151,117);
         margin: 20px 0px 20px 0px; /* Top Right Bottom Left*/
         padding: 10px       
    }

删除高度属性

Answer 3

CSS3

.container {
    display: inline;
    position: relative;
}

应该修复它。如果您希望它成为内联代码块，请使用inline-block。