0

我有一个容器，它有两个浮动的子 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;
}
4

4 回答 4

1

添加clear: both;到您的#extradiv 的 css 中，如下所示：

#extra {
    background-color:red;
    width:80% !important;
    float:none !important;
    margin-top:20px;
    clear: both;
}
于 2012-09-14T22:44:49.430 回答
0

添加 CSS 清除：

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

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

于 2012-09-14T22:42:43.223 回答
0

更好的解决方案是对所有 3 个 Div 使用 display: 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-14T22:44:49.510 回答
0

您需要清除 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 下方插入 clear:both div

于 2012-09-14T22:47:54.563 回答