您需要將這兩個 div 放入另一個 div 中。因此，包含工作經(jīng)驗和個人信息的 div 將顯示為相對于它們所在的 Flex div 的塊。我已附上示例代碼和修復程序。
.resume-body {
background-color: #1f2021;
}
.wrapper-body-resume {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Header */
.header-resume {
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-repeat: no-repeat;
margin: 0;
position: relative;
width: 100%;
height: 350px;
z-index: 1;
box-sizing: border-box;
display: flex;
flex-direction: row-reverse;
background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));
}
.GP {
background: url(../Resources/Aljon-GP.png);
width: 100%;
height: 500px;
background-size: contain;
background-repeat: no-repeat;
bottom: 150px;
left: 400px;
position: relative;
}
.name-left {
text-align: center;
box-sizing: border-box;
justify-content: center;
width: 50%;
height: 100%;
padding: 80px 0 0 0;
margin: 0;
left: 300px;
position: relative;
}
.name-left h1 {
line-height: 0;
font-size: 30px;
color: #ffffff;
}
.name-left p {
color: #999999;
}
.body-resume {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
background-color: rgb(255, 255, 255);
}
.about {
padding: 5px;
margin: 10px;
font-family: Arial;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.about h1 {
padding: 10px;
margin: 5px;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.about p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 150px;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.personalinfo h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.personalinfo p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.column1 {
display: flex;
flex: row;
}
.education {
padding: 5px;
margin: 10px;
width: 30%;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
}
.education h1 {
padding: 10px;
margin: 5;
font-size: 20px;
font-family: Arial;
color: #1f2021;
}
.education p {
padding: 10px;
margin: 5px;
font-size: 16px;
font-family: Arial;
font-style: italic;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 150px;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.cert {
padding: 5px;
margin: 10px;
font-family: Arial;
width: 50%;
height: 500px;
box-sizing: border-box;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<main>
<div class="wrapper-body-resume">
<div class="header-resume">
<div class="GP"></div>
<div class="name-left">
<h1>Aljo</h1>
<p style=" color: white"><i><b>logy</b></i></p>
<p style=" color: white">Contac +39</p>
<hr>
<p><i>"Th</i></p>
<p><i>-Colin Powell</i></p>
</div>
</div>
<div class="body-resume">
<div class="about">
<h1>About me</h1>
<p>I .</p>
</div>
<div class="column1">
<div class="education">
<h1>Education</h1>
<p><b><u>Elementary</u></b></p>
<p><i><b>Sool</b></i><br>An9)</p>
<p><i><b>Scia</b></i><br>P11)</p>
<p><b><u>High School</u></b></p>
<p><i><b>Hemy</b></i><br>An 2012)</p>
<p><i><b>Frol</b></i><br>Po4)</p>
<p><i><b>Ju</b></i><br>C 2015)</p>
<p><b><u>College</u></b></p>
<p><i><b>Uninan</b></i><br>C5 - 2019)</p>
</div>
<div class="flex-container">
<div class="personalinfo">
<h1>Personal Info</h1>
<p>
</div>
<div class="workexper">
</div>
</div>
</div>
<div class="cert">
</div>
</div>
</div>
</main>
