2

我有一个包含其他两个部分的 HTML 部分“全部”。我无法让网站根据我放入其他两个部分的内容的长度来调整“全部”部分的高度。

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

我目前将高度设置为 700 像素的固定大小。我想知道是否有可能在 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;
}
4

2 回答 2

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

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

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

于 2012-04-17T17:45:11.293 回答
2

删除 #all 的高度声明（如 Diodeus 所说）。然后，您需要在两个内容 div 下方应用一个清除元素（如页脚），或对 div #all 应用一个 clearfix。

例如：

/* For modern browsers */
#all:before,
#all:after {
    content:"";
    display:table;
}

#all:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
#all {
    zoom:1;
}

这是Nicolas Gallagher 出色的 micro clearfix的直接复制和粘贴。

于 2012-04-17T17:52:58.837 回答