非浮动的div旁边的两个浮动的div

我有一个容器，它有两个子div（切换黄色背景来查看它们），这是浮动。我想添加第三个（红色）低于这两个，没有任何浮动，但它延伸通过所有的容器。任何想法为什么？非浮动的div旁边的两个浮动的div

HTML

<center> 
<div id='container'> 
    <div class="big"></div> 
    <div class="big"></div> 
    <div id='extra'>abc<div>  
<div> 
</center>

CSS

#container { 

    height:400px; 
    width:400px; 
    background-color:gray; 
} 

.big { 
    height:350px; 
    /* background-color:yellow;*/ 
} 

#container > div:first-child {border-right:1px solid black;} 

#container > div { 
width:199px; 
float:left; 

} 

#extra { 

    background-color:red; 
    width:80% !important; 
    float:none !important; 
    margin-top:20px; 
}

来源

2012-09-14 Biker John

你不应该使用''

。相反，'边距：0自动;'中心div。 –

添加clear: both;您#extra div的CSS，像这样：

#extra { 
    background-color:red; 
    width:80% !important; 
    float:none !important; 
    margin-top:20px; 
    clear: both; 
}

来源

2012-09-14 22:44:49 Nelson

添加CSS清除：

#extra { 
    clear: both; 
    background-color:red; 
    width:80% !important; 
    float:none !important; 
    margin-top:20px; 
}

试试这个：http://jsfiddle.net/RrQff/5/

来源

2012-09-14 22:42:43 jtheman

更好sollution是使用显示：所有3周的div或inline-block的：

> #container{ position: relative;} 
> #container .big:first {position: absolute; top: ... left: ...} 
> #container div+div { top: ..left } $container #extra { position: absolute; right: 0; top: 0} }

来源

2012-09-14 22:44:49

您需要清除div。试着这样做：

<center> 
<div id='container'> 
    <div class="big">div one (floated)</div> 
    <div class="big">div two (floated)</div> 
    <div class="clear" style="clear:both" /> 
    <div id='extra'>third div (which i want below floated ones)<div>   
<div> 
</center>

插入一个明确的：两个以下两个DIV浮动的div

来源

2012-09-14 22:47:54 Oedum

非浮动的div旁边的两个浮动的div

回答

相关问题