Question

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

Answer 1

添加CSS清除：

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

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

Answer 2

更好的解决方案是使用display：inline-block for all 3 Divs：

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

Answer 3

你需要清除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>

插入一个clear：两个div下面的两个浮动div

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

3 个答案: