0

フロートされたままの2つの子div（黄色の背景を切り替えて表示）を持つコンテナがあります。これらの 2 つの下に 3 つ目 (赤色) をフローティングせずに追加したかったのですが、コンテナ全体に広がっています。理由はありますか？

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

次のように、divclear: both;の css に追加します。#extra

#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>

2 つのフローティング div の下に clear:both div を挿入します。

于 2012-09-14T22:47:54.563 に答える