contaner應該爲我計算身高嗎？

我已經包含了三個部分格在我的網站一個DIV 代碼是這樣的：contaner應該爲我計算身高嗎？

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

在CSS：

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

當我刪除float:left形式#container的然後它的高度不會是零使用Firefox的，但是當我加回來，它會正常工作，但我不能在瀏覽器窗口中心的男孩。

我該如何解決這個問題？

來源

2012-01-17 Lien

檢查HTML代碼 DIV之一：沒有ID DIV二：DIV1 DIV三：DIV1 – MCSI 2012-01-17 02:23:50

使用清晰的div。這將允許您的容器適應浮動元素的高度。你的CSS也有一些錯誤。

「＃」。不是你如何聲明一個ID。

此外，您的HTML中的ID需要匹配您的CSS中的ID 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>

來源

2012-01-17 02:23:51

謝謝你，我有固定的問題！ – Lien 2012-01-17 02:54:53

有一個簡單的解釋。

浮動元素意味着你將它從正常的元素流中取出，非浮動元素不會爲它騰出空間。

因此，當一個容器只有子元素float ed時，容器將不會取其子元素的高度或寬度。

爲了讓這個工作直觀起來，意思是讓容器取其子的寬度和高度，可以使用容器的float，也可以使用several methods for clearing floats之一。

我的首選解決方案是在容器上使用overflow: hidden，如果浮動它不適用於您的方案。 overflow: hidden將在最簡單的情況下工作。

來源

2012-01-17 02:24:13 wsanville

謝謝！這是一個很好的解決方案！ – Lien 2012-01-17 02:55:46

而不是使用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>

來源

2012-01-17 02:25:40

contaner應該爲我計算身高嗎？

回答

相關問題