Question

好吧所以我有一个带有包装div和div的页面。包装器居中（边缘自动），孩子们浮动，问题是包装器不会随着它的孩子一起成长。 html：

<div id="wrapper">
<div id="banner"></div>
<h1>Resource page</h1>
<div id="non-vidCon">
    <div id="images" class="debug">
            <ul id="imgList">
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
            </ul>
    </div>
    <div id="docs">
            <ul id="docList">
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
                <li>ha</li>
            </ul>
    </div>
</div>
<div id="vidCon"></div>

的CSS：

#wrapper {
background-color:#F5F5F5;
width:1000px;
height:100%;
margin: auto;
margin-top: 20px;
position: relative;
}

#banner {
background: url('../images/Duke_BackToBack_Header.jpg');
width: 1000px;
height: 111px;
position: relative;
top: 0px;

}

#non-vidCon {
width: 1000px;
height: auto;
min-height: 300px;
position: relative;
border-top: 1px solid #cccccc;
}

#images {
width: 498px;
height:auto;
position: relative;
float: left;
content: "";


}


#docs {
width: 498px;
height:auto;
position: relative;

content: "";
float: left;


}

我已经搜索了堆栈（这个网站）并已经应用了一些修复，但没有一个工作（内联块杀死我的自动边距）任何帮助将不胜感激

Answer 1

将overflow:auto粘贴到＃wrapper的css上，以便它包含其中的内容。你基本上就在那里，只需要一种方法来包装该列表。

#wrapper {
  background-color:#F5F5F5;
  width:1000px;
  margin: auto;
  margin-top: 20px;
  position: relative;
  overflow:auto;
}

有关示例，请参阅此jsFiddle。这是一个jsFiddle example with your old HTML too。

Answer 2

你需要清理你的花车。

在#wrapper结束前，添加：

<div class="clear"></div>

CSS：

.clear {
   clear:both   
}

Answer 3

通过浮动#non-vidCon的每个子项，您将从流中删除其所有内容，因此没有高度，没有可见的背景，也不关心其内容的长度：它不是流的一部分了。

Diodeus解决方案是最兼容的解决方案，但需要额外的div。另一个解决方案是添加

#non-vidCon:after {
    content: "";
    display: block;
    clear: both;
}

仅适用于IE6 / 7，将hasLayout赋予元素。

   #non-vidCon { zoom: 1; }

为什么父母与孩子一起成长

3 个答案: