0

当我缩放浏览器时，日期和apa div 超出了容器div。即使缩放，如何将日期/apa 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/

4

2 回答 2

0

大多数时候，绝对定位会导致这种情况。尽量不要使用绝对定位

于 2013-04-06T01:01:25.370 回答
0 
#header{
    height: 50px;
    width: 100%;
    background-color: black;
}

如果父级也未设置，则无法继承基于父级的宽度，请尝试

body {
    width: 100%;
}

也摆脱它* { margin: auto; }，只将它添加到必须居中的东西中。

其他问题，您正在使用#header { width: 100%; }，然后#content { width: 800px; }这是一个坏主意。如果 header 小于 800px，content 会做什么？行为奇怪，出乎意料。所以，请不要这样做。用百分比或 NONE 指定所有（对于初学者来说会更容易）。

这是我的小提琴，猜测你可能想要做什么。它可以正确缩放缩放，并且不使用百分比。

http://jsfiddle.net/QgH99/

于 2013-04-06T01:21:09.043 回答