CSS部分自动调整高度？

Question

我有一个HTML部分"all"包围其他两个部分.根据我放入其他两个部分的内容的长度,我无法让网站调整"全部"部分的高度.

<section id="all">
   <section id="left_content">
      <p>Something here.</p>            
   </section>
   <section id="right_content">
      <p>Something here.</p>
   </section>
</section>

我目前的高度设置为固定大小700px.我想知道在CSS中是否有可能让该部分的高度与left_content和right_content部分的大小相关.

#all {
    width: 900px;
    height: 700px;
    margin: 0 auto;
    padding-top: 20px;
    background: #F4F4F4;
}

#left_content {
    float: left;
    width: 570px;
    margin-top:-20px;
    padding: 0px 20px 10px 20px;
    line-height: 25px;
    font-size: 12px;
}

#right_content {
    border-left:4px solid #cccccc;
    float: right;
    width: 250px;
    padding: 0px 10px 20px 20px;
    line-height: 20px;
    font-size: 12px;
}

Answer 1

• 不要给#all高度
• 清除你的花车

子项目浮动时,您的包装器无法确定高度.你需要一个"结束"浮动的元素.<div style='clear:both'></div>是清除浮子的常用方法.Clearfix是另一种技术.

阅读更多:http://css-tricks.com/all-about-floats/