使div和span固定在网格布局中

Question

我试图创建一个网格布局，但遇到了这个问题。我想将div(概要文件图像)和span固定在div(包装器概要文件介绍)中。我的工作是

#main-profile{
margin: 0;
profile: 0;
}
.profile-container{
max-width:1280px;
margin: 0 auto;
box-sizing: border-box;
}
.wrapper-profile{
width: 100%;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas: "intro details details details";
grid-gap: 0.5em;
}
.wrapper-profile .wrapper-profile-intro{
grid-area: intro;
}
.wrapper-profile .wrapper-profile-details{
grid-area: details;
}
.wrapper-profile .wrapper-profile-intro,.wrapper-profile .wrapper-profile-details{
background: #fff;
padding: 0 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.profile-header{
margin: 0;
padding: 0;
}
.profile-header img{
display: cov0er;
width: 100%;
height: 200px;
opacity: 0.6;    
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.wrapper-profile-intro .profile-image{
display:flex;
justify-content:center;
align-items-center;
}
.wrapper-profile-intro .profile-image img{
flex-wrap: wrap;
pointer-events: none;
border-radius: 50%;
width: 90px;
height: 90px;
float: none;
display: block;
object-fit: fill;
margin-bottom: 5px;
border: 4px solid #fff;
box-shadow:1px 3px 2px rgba(0,0,0,0.18);  
-webkit-box-shadow:1px 3px 2px rgba(0,0,0,0.18);
-moz-box-shadow:1px 3px 2px rgba(0,0,0,0.18);
}
.wrapper-profile-intro .profile-image span{
position:absolute;
background: #2afa6a;
width:16px;
height:16px;
border-radius:50%;
bottom:3px;
left:11px;
border:2px solid #fff;
}
@media(max-width: 768px){
.wrapper-profile{
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-template-areas: "intro"
"details";
}
}

<div id="main-profile">
<div class="profile-header">
<img src="https://img.freepik.com/free-photo/abstract-grunge-decorative-relief-navy-blue-stucco-wall-texture-wide-angle-rough-colored-background_1258-28311.jpg?w=2000" alt="profile-header">
</div>
<div class="profile-container">
<div class="wrapper-profile">
<div class="wrapper-profile-intro">
<div class="profile-image">
<img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png">
<span></span>
</div>
</div>
<div class="wrapper-profile-details">
<p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
</div>
</div>
</div><!--profile-container-->
</div>

我尝试了positionabsolute和将relative设置为外部div，但没有成功。看看我如何在div、wrapper profile intro中修复div概要文件图像。

Answer 1

mmmm。。。我仍然不确定我是否完全理解你在寻找什么。。。但我做了一个比你简单的片段。告诉我是否可以，以及在其中更改什么。

对于@media工作，不要忘记在html 顶部添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

body {
margin: 0;
padding: 0;
}
#main-profile {
display: grid;
grid-template-rows: 200px 1fr;
grid-template-columns: 1fr;
gap: 10px;
width: 100%;
height: 100%;
}
.profile-header {
grid-area: 1 / 1 / 2 / 2;
}
.profile-header img {
width: 100%;
height: 100%;
opacity: 0.6;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.wrapper-profile-container {
grid-area: 2 / 1 / 3 / 2;
justify-self: center;
max-width: 1280px;
}
.profile-container {
display: grid;
gap: 10px;
grid-template-rows: 1fr;
grid-template-columns: 25% 1fr;
margin-bottom: 10px;
}
.wrapper-profile-intro,
.wrapper-profile-details {
background: #fff;
padding: 0 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.wrapper-profile-intro {
text-align: center;
position: relative;
}
.wrapper-profile-intro img {
pointer-events: none;
border-radius: 50%;
width: 90px;
height: 90px;
margin-bottom: 5px;
border: 4px solid #fff;
box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.18);
-webkit-box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 1px 3px 2px rgba(0, 0, 0, 0.18);
}
.wrapper-profile-intro span {
position: absolute;
background: #2afa6a;
width: 16px;
height: 16px;
border-radius: 50%;
bottom: 3px;
left: 11px;
border: 2px solid #fff;
}
@media (max-width: 768px) {
.profile-container {
grid-template-columns: 1fr;
}
}

<div id="main-profile">
<div class="profile-header">
<img src="https://img.freepik.com/free-photo/abstract-grunge-decorative-relief-navy-blue-stucco-wall-texture-wide-angle-rough-colored-background_1258-28311.jpg?w=2000" alt="profile-header">
</div>
<div class="wrapper-profile-container">
<div class="profile-container">
<div class="wrapper-profile-intro">
<img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png">
<span></span>
</div>
<div class="wrapper-profile-details">
<p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="profile-container">
<div class="wrapper-profile-intro">
<img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png">
<span></span>
</div>
<div class="wrapper-profile-details">
<p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!--profile-container-->
</div>

Answer 2

#main-profile{
margin: 0;
profile: 0;
}
.profile-container{
max-width:1280px;
margin: 0 auto;
box-sizing: border-box;
}
.wrapper-profile{
width: 100%;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-areas: "intro details details details";
}
.wrapper-profile .wrapper-profile-intro{
grid-area: intro;
}
.wrapper-profile .wrapper-profile-details{
grid-area: details;
}
.wrapper-profile .wrapper-profile-intro,.wrapper-profile .wrapper-profile-details{
background: #fff;
padding: 0 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 10px;
}
.profile-header{
margin: 0;
padding: 0;
}
.profile-header img{
display: cover;
width: 100%;
height: 200px;
opacity: 0.6;    
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.wrapper-profile-intro .profile-card{
display:grid;
}
.wrapper-profile-intro .profile-card .profile-image{
margin: 0 auto;
margin-top: -50px;
z-index: 1;
}
.wrapper-profile-intro .profile-image img{
flex-wrap: wrap;
pointer-events: none;
border-radius: 50%;
width: 90px;
height: 90px;
float: none;
display: block;
object-fit: fill;
margin-bottom: 5px;
border: 4px solid #fff;
box-shadow:1px 3px 2px rgba(0,0,0,0.18);  
-webkit-box-shadow:1px 3px 2px rgba(0,0,0,0.18);
-moz-box-shadow:1px 3px 2px rgba(0,0,0,0.18);
}
.profile-card .profile-image span{
position:absolute;
display: flex;
background: #2afa6a;
width:16px;
height:16px;
border-radius:50%;
margin-left: 60px;
margin-top: -20px;
border:2px solid #fff;
}
@media(max-width: 768px){
.wrapper-profile{
grid-template-rows: auto;
grid-template-columns: 1fr;
grid-template-areas: "intro"
"details";
}
.wrapper-profile .wrapper-profile-intro,.wrapper-profile .wrapper-profile-details{
margin-bottom: -5px;
}
}

<div id="main-profile">
<div class="profile-header">
<img src="https://img.freepik.com/free-photo/abstract-grunge-decorative-relief-navy-blue-stucco-wall-texture-wide-angle-rough-colored-background_1258-28311.jpg?w=2000" alt="profile-header">
</div>
<div class="profile-container">
<div class="wrapper-profile">
<div class="wrapper-profile-intro">
<div class="profile-card">
<div class="profile-image">
<img src="https://cdn.pixabay.com/photo/2020/07/01/12/58/icon-5359553_1280.png">
<span></span>
</div>
</div>
</div>
<div class="wrapper-profile-details">
<p> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>    
</div>
</div>
</div><!--profile-container-->
</div>

这就是解决方案。