contanerが私の身長を計算する必要がありますか？

Question

私は私のウェブサイト コード内の一部のための3つのdivを含む1つのdivは次のようである持っている：私は、#container float:leftフォームを削除する場合

#container { 
margin: 0 auto; 
width: 950px; 
opacity: .5; 
filter: alpha(opacity = 50); 
background: #fff;} 

#div1 { 
width: 100%; 
height: 30px; 
background: black; 
float: left;} 

#div2 { 
margin:50px 0 50px 0; 
width: 950px; 
float: left;} 

#div3 { 
border: 1px solid black; 
width: 437px; 
height: 532px; 
margin: 18px; 
float: left;} 

：CSSで

<div id="container"> 
<div ></div> 
<div id="div1"></div> 
<div id="div1"></div></div> 

Firefoxの を使用して高さがゼロになることはありませんが、私はそれを元に戻すと正しく動作しますが、ブラウザのウィンドウにその少年を集中させることはできません。

どうすればこの問題を解決できますか？

Answer 1

clear divを使用してください。これは、あなたのコンテナが浮動要素の高さに適応することを可能にします。また、CSSにいくつかのエラーがありました。

"＃。"あなたがIDを宣言する方法ではありません。

さらに、HTMLのIDは、CSS 100％の大文字と小文字を区別する必要があります。あなたのHTMLでは、あなたはid="contianer"を持っていましたが、あなたのCSSで、#container

.clear { 
    clear:both; 
    display:block; 
    overflow:hidden; 
    visibility:hidden; 
    width:0; 
    height:0!important 
} 

#container { 
    margin: 0 auto; 
    width: 950px; 
    opacity: .5; 
    filter: alpha(opacity = 50); 
    background: #fff; 
} 
#div1 { 
    width: 100%; 
    height: 30px; 
    background: black; 
    float: left; 
} 

#div2 { 
    margin:50px 0 50px 0; 
    width: 950px; 
    float: left; 
} 

#div3 { 
    border: 1px solid black; 
    width: 437px; 
    height: 532px; 
    margin: 18px; 
    float: left; 
} 

<div id="container"> 
    <div ></div> 
    <div id="div1"></div> 
    <div id="div2"></div> 
    <div class="clear"></div> 
</div> 

Answer 2

簡単な説明があります。

要素を浮動させると、要素の通常の流れから取り除くことを意味し、浮動小数点以外の要素は空き領域を作成しません。。

したがって、コンテナに子要素がある場合は、float edとなります。は、子の高さまたは幅を持ちません。

この作業を直感的に行うには、コンテナに子の幅と高さを指定することをお勧めします。floatまたはseveral methods for clearing floatsのいずれかを使用できます。

私の推奨する解決策は、コンテナにoverflow: hiddenを使用することです。浮動すると、シナリオでは機能しません。 overflow: hiddenはほとんどの単純なケースで動作します。

Answer 3

float：left ...を使用する代わりに、use display：inline;

<style> 
    #container{margin:0 auto;width:950px;opacity: .5;filter: alpha(opacity = 50);background: #fff;text-align:center;} 
    #container div{display:inline;} 
</style> 
<div id="container"> 
    <div class="div1">Div 1</div> 
    <div class="div2">Div 2</div> 
    <div class="div3">Div 3</div> 
</div>