2

点击这里查看视觉

从图片中可以看出，我的父容器没有扩展以适应我的子容器。页面容器 (#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;
}
4

3 回答 3

0

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

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

一定要把它放在 :after 伪选择器中，否则它对你不起作用。浮动元素存在于正常文档流之外，这就是为什么容器没有扩展以包含它们的原因。clear 修复强制清除浮动，这将导致容器围绕该元素的底部展开。

于 2013-03-07T20:42:37.280 回答
0

我测试了添加更多图像#zone2并#contain垂直扩展。不知何故，你有一个元素#zone2没有被添加到父元素的总高度中。

如果您想快速修复以继续前进，请添加margin-bottom: 30px;到#zone2.

于 2013-03-07T21:31:05.653 回答
0

我已经复制了您的问题并能够通过以下方式解决它：您可能想尝试一下。它看起来有点奇怪，所以如果你愿意，可以为它开设一个课程。我更关心它的放置位置。

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

<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;
}

[编辑] 代码在 Firefox 中有一个严重的错误，谷歌浏览器中不存在该错误（由于您的相对定位，我之前测试过。所以我修改了#zoneclear 样式来解决这个问题。您可能需要测试是否其他浏览器喜欢这个黑客。

希望对你有帮助

于 2013-03-07T21:33:35.150 回答