容器未为子div调整大小

Question

点击此处查看

从图片中可以看到，我的父容器没有扩展到适合我的子容器的大小。 页面容器（#contain）实际上停在厨房照片的左下角。 子容器（＃zone2）显然在其父容器（#contain）之外溢出。 我希望能够（#contain）自动扩展以适合（＃zone2）。 CSS是：

#contain {
    position: relative;
    width: 100%;
    margin: 0 px;
    background: #E3DCCC;
    z-index: 0;
}

#zone1 {
    width: 100%;
    height: 850px;
    background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center   top;
    position: absolute;
    z-index: -1;
}
#head {
    position: absolute;
    top: 20px;
    width: 100%;
    height: 330px;
}

#head img {
    max-width: auto;
    height: auto;
}

#zone2 {
    position: relative;
    overflow: hidden;
    padding: 3px;
    top: 360px;
    float: right;
    right: 15px;
    width: 53%;
    height: auto;
    border: 4px solid #715E40;
    background-color: white;
}
#zone2 img {
      max-width:100%;
      height: auto;
      float:left;
      margin: 5px;
}

#zone3 {
    position: relative;
    top: 710px;
    left: 15px;
    float: left;
    height: 340px;
    width: 38%;
    border: 4px solid #715E40;
    background-color: white;
} 

Answer 1

这是一个浮动问题。 尝试将传统的CSS清除修复程序添加到＃zone2的容器中：

.container:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

请确保将其放在：after伪选择器中，否则它将对您不起作用。 浮动元素存在于常规文档流之外，这就是为什么容器不扩展以包含它们的原因。 清除固定将迫使浮子被清除，这将导致容器在该元件的底部周围膨胀。

Answer 2

我测试了向#zone2添加更多图像，并且#contain垂直扩展。 不知何故，您在#zone2有一个元素，但未将其空白或边距添加到父级的总高度中。

如果要继续快速修复，请添加margin-bottom: 30px; 到#zone2 。

Answer 3

我已经重复了您的问题，并可以通过以下方法解决它：您可能想尝试一下。 它看起来有些奇怪，所以如果您愿意，可以上课。 我更关心它的放置位置。

在代码行的下面，添加我的第三行。 就这样，您就完成了。 注意，它更多关于定位。

<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />

只需添加第三行。

并修改您的一种样式：

#zoneclear {   
    clear: both;
    float:none;
    display:block;  
    height: 30px;
    position: relative;
}

[EDIT]该代码在firefox中有一个严重的错误，该错误在Google Chrome中不存在（由于您的相对位置，我较早时进行了测试。因此，我已经修改了#zoneclear样式来解决此问题。您可能必须测试一下其他浏览器，如这种黑客。

希望对您有帮助