html - 为什么我的内部 div 位于容器 div 之外?

标签 html css

当我缩放浏览器时,dateapa div 超出了 container 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/

最佳答案

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

关于html - 为什么我的内部 div 位于容器 div 之外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15845761/

相关文章:

html - 将 div 内的图像右对齐

html - 如何使用CSS的特异性?

html - 使文字位于另一个下方

php - 从本地文件访问 mysql 数据库和服务器端脚本

css - Vaadin 14 Grid autoWidth with wrap content

html - 使用 :before psuedo element to create Div height in responsive grids

html - 相对div高度

javascript - 如何在刷新页面时将先前的 ng-click 初始化值保留为 ng-init 值

html - 使用 pdf2htmlEx 工具将 pdf 转换为 html 期间字体未对齐

jquery - 聊天框的 Html SignalR Chat 溢出