为什么不会父母的div与其子女一起成长

好，所以我有一个包装div和div的页面。包装是居中（边缘自动）和孩子们正在漂浮问题是包装将不会与其子女一起成长。 HTML：为什么不会父母的div与其子女一起成长

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


}

我已经通过堆栈（本网站）搜索并已申请了一些修正，但没有工作（inline-block的杀了我的缘汽车）任何帮助，将不胜感激

来源

2012-02-16 zero

你需要清除你的花车。

的#wrapper结束前，加入：

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

CSS：

.clear { 
    clear:both 
}

来源

2012-02-16 19:43:42

或[微清晰修复（http://nicolasgallagher.com/micro-clearfix-hack/） – elclanrs 2012-02-16 19:49:18

这可能会问太多，但你能告诉我，为什么这个工作？由于某种原因，我发现纯编码（JavaScript，动作脚本，Java等）比CSS更容易。对我来说，CSS似乎很不合逻辑：P – zero 2012-02-16 19:55:32

我不认为我可以说比这更好：http://css-tricks.com/the-how-and-why-of-clearing-floats/ – 2012-02-16 19:58:37

棒overflow:auto您＃包装的CSS，以便它包含在其中的内容。你基本上在那里，只需要一种方法来包装这个列表。

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

查看这个jsFiddle的例子。这是jsFiddle example with your old HTML too。

来源

2012-02-16 19:45:52 scottheckel

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

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

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

并且只对IE6/7给出元素的hasLayout。

#non-vidCon { zoom: 1; }

来源

2012-02-16 19:49:12 FelipeAls

为什么不会父母的div与其子女一起成长

回答

相关问题