我有一个容器,它有两个浮动的子 div(切换黄色背景以查看它们)。我想在这两个下方添加第三个(红色),没有任何浮动,但它延伸到所有容器。任何想法为什么?
JSFIDDLE:http: //jsfiddle.net/RrQff/2/
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;
}