为什么我的内部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？

回答

相关问题