Question

我试图让孩子的Div(div in other) 留在父母的体内,而不是从中出来。我想让Div(div)随时留在头版Div(the header Div)内。

<!DOCTYPE html>
<html>
<head>
    <title>Noah</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        body {
            background-color: #0B0F25;
            font-family: Times New Roman , Times, serif;
            
            color: white;


            margin: 0;
            padding: 0;

        }

        #header {
            background-color: #0B0F25;
            width: 100vw;

            border-bottom: .5px solid black;
            border-top: 1.5px solid black;
            height: 5vw;
            background-color: purple;
            
        }

        #cmdLine {
            padding: 10px;
        }

        #cmdTitle {
            text-align: center;
            font-size: 16px;
        }

        #options {
            position: absolute;
            width: 10vw;
            background-color: pink;
        }

        #help {
            padding: 5px;
            display: inline-block;

        }
        
        #action {
            padding: 5px;
            display: inline-block;
        }

    </style>
    
</head>

<body>
    <div id = "header">
        <h3 id = "cmdTitle"> Noah@Noah: ~</h3>

        <div id = "options">
            <h2 id = "action">Actions</h2>
            <h2 id = "help">Help</h2>
        </div>

    </div>
    <p id = "cmdLine">$</p>
</body>

</html>

This displays this: . each div has an ID. I have tried setting position: absolute on the header div then once again on the options div but no luck.

Answer 1

当您将 # 选项设置为绝对时, 它会设置相对于 h3 的 # 选项, 添加一个顶级属性会将其置于更高的位置。

#options {
            position: absolute;
            top: 5px;
            width: 10vw;
            background-color: pink;
        }

Answer 2

只需删除父身身高和选择宽度, 这样就可以默认地使其自动, 让孩子留在父身内。


        body {
            background-color: #0B0F25;
            font-family: Times New Roman , Times, serif;
            color: white;
            margin: 0;
            padding: 0;
        }

        #header {
            width: 100vw;
            border-bottom: .5px solid black;
            border-top: 1.5px solid black;
            background-color: purple;
        }

        #cmdLine {
            padding: 10px;
        }

        #cmdTitle {
            text-align: center;
            font-size: 16px;
        }

        #options {
            background-color: pink;
        }

        #help {
            padding: 5px;
            display: inline-block;
        }
        
        #action {
            padding: 5px;
            display: inline-block;
        }
    </style>

友情链接