Question

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

Answer 1

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

Answer 2

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

如果父级也未设置，

无法继承基于父级的宽度，请尝试

body {
    width: 100%;
}

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

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

这是我的小提琴，GUESSING您可能想要做的事情。它可以正确缩放，不使用百分比。

http://jsfiddle.net/QgH99/

为什么我的内部div超出了容器div？

2 个答案: