如何将一个 Div 添加到另一个 Div答案

【问题标题】：How to add a Div into another Div如何将一个 Div 添加到另一个 Div
【发布时间】：2020-11-05 07:38:00
【问题描述】：

我的 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%;

}

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

【问题讨论】：

你应该把带有 ProfilePic 类的整个 div 放在带有 Sidebar 类的 div 中：
让我试试

标签： html css layout css-position

【解决方案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>

【讨论】：

【解决方案2】：

只需将您的标记更新为此

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

【讨论】：