如何将 Div 添加到另一个 Div

Question

我的 html 网站遇到问题。

这是我看到的：

我想在灰色框内添加我的脸

这是我的 html 代码：


<head>
    <title>App</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    
    <div class="profilePic"><img src="profilePic.png"></div>
    <div class="sideBar"></div>
    
    
</body>

</html>

这是我的 CSS 代码：

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');

*{
padding:0px;
margin:0px;

}

.sideBar{
    width:345px;
    height:647px;
    background-color:#e4e3e3;


}

.profilePic img{
    position:relative;
    width:100px;
    height:100px;
    border-radius: 100%;

}

如果这是一个简单的解决方案，请告诉我。

Answer 1

这会起作用：

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap');

*{
padding:0px;
margin:0px;

}

.sideBar{
    width:345px;
    height:647px;
    background-color:#e4e3e3;


}

.profilePic img{
    position:relative;
    width:100px;
    height:100px;
    border-radius: 100%;

}

<head>
    <title>App</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="sideBar"><img src="profilePic.png"></div>
    
    
</body>

</html>

Answer 2

只需将标记更新为此

<div class="sideBar">
     <div class="profilePic"><img src="profilePic.png"></div>
</div>

如何将 Div 添加到另一个 Div

How to add a Div into another Div

html

css

layout

css-position