如何在div中添加div但将它们浮动到左侧？

我有这样的HTML代码如何在div中添加div但将它们浮动到左侧？

<div id="b_container"> 
    <div id="b_header"> 
     <div class="header_left"><a href="#">link 1 </a></div> 
     <div class="header_left"><a href="#">link 2 </a></div> 
     <div class="header_left"><a href="#">link 3 </a></div> 
    </div> 
    <div id="b_content">content goes here</div> 
    <div id="b_footer">footer goes here</div> 
</div>

我用这个CSS代码

#b_container 
{ 
    margin-right: auto; 
    margin-left: auto; 
    background: red; 
    width:900px; 
    padding: 10px; 
} 

#b_header{ 
    background: #FFF; 
    padding: 5px; 

} 
.header_left{ 
    float: left; 
    width:100px; 
    background: #CCCC00; 

} 
#b_footer{ 
    background: #FFF; 
    padding: 5px; 
} 
#b_content{ 
    background: #00FFFF; 
    padding: 5px; 
    height: 100px; 
}

但结果显示了三个的div（与类header_left）的b_content上方。为什么？

来源

2012-01-07 Bader

您必须停止从div s（与类header_left）的浮动。您可以添加以下行#b_header做到这一点：

overflow: hidden;

也看到这个example。

另一种方法是将clear: both;作为最后一个在空格中添加一个空格，编号为b_header。看到这个example。

来源

2012-01-07 19:09:42 scessor

但结果显示在 b_content之上的三个div（class_ header_left）。为什么？

这是因为你不清除浮动，您可以通过使用overflow:hidden财产或添加一个div clear:both属性作为父div 容器的最后一个孩子这样做。

来源

2012-01-07 19:15:58 defau1t

基本上，有了flaots，你需要清除它们，只需创建一个div与此css：clear: both。

这应该做的伎俩。

查看更多关于花车here

来源

2012-01-07 19:20:47

如何在div中添加div但将它们浮动到左侧？

回答

相关问题