爲什麼我的內部divs去容器div？

當我放大瀏覽器時，日期和apa div去容器 div。即使在縮放時，如何將div仍保留在容器內？對不起，問簡單的問題。只是一個初學者。爲什麼我的內部divs去容器div？

<!DOCTYPE html> 
    <html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" type="text/css" href="testeffect.css"/> 
    </head> 

    <body> 


     <div id="header"> 


      <div id="container"> 
       <div id="date"> 
        <p>18 Jamadilawal 1434H<br> Saturday, 30th March 2013<br><p> 
       </div> 

       <div id="apa"> 
       <p>18 Jamadilawal 1434H<br> Saturday, 30th March 2013<br><p> 
       </div> 

      </div> 



     </div> 

    </body> 
</html> 


*{margin: 0 auto;} 

#header{ 
    height: 50px; 
    width: 100%; 
    background-color: black; 
} 

p{ 
    font-family: Garamond; 
    font-size: 18px; 
    color: white; 
} 


#container{ 
height: 50px; 
width: 800px; 
position: absolute; 
left: 20% 
} 


#apa{ 
    position: absolute; 
    left: 200px; 
    width: 200px; 
    height: 50px; 
    background-color: brown; 
    left: 420px; 
} 


#date{ 
    position: absolute; 
    left: 200px; 
    width: 200px; 
    height: 50px; 
    background-color: brown; 
}

http://jsfiddle.net/zWpM9/

來源

2013-04-06 user2251028

你能重現你遇到過的[的jsfiddle]這個問題（http://www.jsfiddle.net/）？ – Jesse 2013-04-06 01:00:58

我編輯了這個問題，並添加了一個小提琴 – Mandar 2013-04-06 01:03:38

包括jsFiddle低於 – user2251028 2013-04-06 01:18:54

大部分的時間，絕對定位導致這一點。儘量不要使用絕對定位

來源

2013-04-06 01:01:25 Mandar

Thx @Mandar。我試圖改變所有的立場相對，但它仍然沒有解決問題。 – user2251028 2013-04-06 01:17:37

#header{ 
    height: 50px; 
    width: 100%; 
    background-color: black; 
}

不能繼承基於關閉，如果家長也不設置父的寬度，儘量

body { 
    width: 100%; 
}

也擺脫* { margin: auto; }的，只有把它添加到的東西，必須居中。

其他問題，您正在使用#header { width: 100%; }，然後#content { width: 800px; }這是一個不好的主意。如果標題小於800像素，內容會做什麼？奇怪的是，出乎意料地行事。所以，請不要這樣做。要麼指定所有的百分數，要麼指定無（作爲初學者會更容易）。

這裏是我的小提琴，猜測你可能想要做什麼。它可以正確縮放，並且不使用百分比。

http://jsfiddle.net/QgH99/

來源

2013-04-06 01:21:09 ohmusama

如果您希望這種情況也可以，請在容器中添加寬度：100％。 – ohmusama 2013-04-06 03:35:37

爲什麼我的內部divs去容器div？

回答

相關問題