容器未為子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樣式來解決此問題。您可能必須測試一下其他瀏覽器，如這種黑客。

希望對您有幫助