如何将矩形 div 放在 Flex 空间上？

Question

我希望 div 矩形也将列在提供的空间上。我在 .education 上使用了 display flex，这样另一个 div 将位于 education 的一侧，但是如果我将另一个矩形 div 附加在 2 个矩形的底侧，它就会位于一侧。请原谅我的英语。

我怎样才能做到这一点？请帮助我提前谢谢你！

<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="personalinfo">

    <h1>Personal Info</h1>

    <p>

</div>

<div class="workexper">

</div>

</div>

<div class="cert">

</div>

</div>

</div>

</main>

Answer 1

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

Answer 2

CSS-Grid被证明是使用简洁代码实现此类布局的强大工具。一旦您应用 @media 查询在小屏幕上运行您的应用程序，这就是一个非常方便的工具，因为这不遵循顺序。我们可以将网格项放置在网格上的任何位置。这是演示。.resume-body {&nbsp; background-color: #1f2021;}.wrapper-body-resume {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; display: flex;&nbsp; flex-direction: column;}/* Header */.header-resume {&nbsp; font-family: Arial;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&nbsp; background-repeat: no-repeat;&nbsp; margin: 0;&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 350px;&nbsp; z-index: 1;&nbsp; box-sizing: border-box;&nbsp; display: flex;&nbsp; flex-direction: row-reverse;&nbsp; background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));}.GP {&nbsp; background: url(../Resources/Aljon-GP.png);&nbsp; width: 100%;&nbsp; height: 500px;&nbsp; background-size: contain;&nbsp; background-repeat: no-repeat;&nbsp; bottom: 150px;&nbsp; left: 400px;&nbsp; position: relative;}.name-left {&nbsp; text-align: center;&nbsp; box-sizing: border-box;&nbsp; justify-content: center;&nbsp; width: 50%;&nbsp; height: 100%;&nbsp; padding: 80px 0 0 0;&nbsp; margin: 0;&nbsp; left: 300px;&nbsp; position: relative;}.name-left h1 {&nbsp; line-height: 0;&nbsp; font-size: 30px;&nbsp; color: #ffffff;}.name-left p {&nbsp; color: #999999;}.body-resume {&nbsp; width: 100%;&nbsp; padding: 10px 20px;&nbsp; box-sizing: border-box;&nbsp; background-color: rgb(255, 255, 255);}.about {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; font-family: Arial;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}.about h1 {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; font-size: 20px;&nbsp; font-family: Arial;&nbsp; color: #1f2021;}.about p {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; font-size: 16px;&nbsp; font-family: Arial;&nbsp; font-style: italic;}.column1 {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(8, 1fr);&nbsp; grid-template-rows: repeat(5, 125px);&nbsp; gap: 0.5rem;}.education {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; box-sizing: border-box;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; grid-column: 1/3;&nbsp; grid-row: 1/6;}.education h1 {&nbsp; padding: 10px;&nbsp; margin: 5;&nbsp; font-size: 20px;&nbsp; font-family: Arial;&nbsp; color: #1f2021;}.education p {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; font-size: 16px;&nbsp; font-family: Arial;&nbsp; font-style: italic;}.personalinfo {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; font-family: Arial;&nbsp; height: 500px;&nbsp; box-sizing: border-box;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&nbsp; grid-column: 3/5;}.personalinfo h1 {&nbsp; padding: 10px;&nbsp; margin: 5;&nbsp; font-size: 20px;&nbsp; font-family: Arial;&nbsp; color: #1f2021;}.personalinfo p {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; font-size: 16px;&nbsp; font-family: Arial;&nbsp; font-style: italic;}.workexper {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; font-family: Arial;&nbsp; height: 500px;&nbsp; box-sizing: border-box;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&nbsp; grid-column: 5/9;}.cert {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; font-family: Arial;&nbsp; width: 50%;&nbsp; height: 500px;&nbsp; box-sizing: border-box;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&nbsp; grid-column: 3/9;&nbsp; grid-row: 5/6;}<!DOCTYPE html><html>&nbsp; <head>&nbsp; &nbsp; <meta charset="UTF-8" />&nbsp; &nbsp; <meta name="viewport" content="width=device-width, initial-scale=1.0" />&nbsp; &nbsp; <title>Document</title>&nbsp; &nbsp; <link rel="stylesheet" href="./style.css" />&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <main>&nbsp; &nbsp; &nbsp; <div class="wrapper-body-resume">&nbsp; &nbsp; &nbsp; &nbsp; <div class="header-resume">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="GP"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="name-left">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Aljo</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style="color: white">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i><b>logy</b></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style="color: white">Contac +39</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <hr />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><i>"Th</i></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p><i>-Colin Powell</i></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="body-resume">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="about">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>About me</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>I .</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="column1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="education">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Education</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b><u>Elementary</u></b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i><b>Sool</b></i&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><br />An9)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i><b>Scia</b></i&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><br />P11)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b><u>High School</u></b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i><b>Hemy</b></i&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><br />An 2012)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i><b>Frol</b></i&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><br />Po4)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i><b>Ju</b></i&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><br />C 2015)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b><u>College</u></b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i><b>Uninan</b></i&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ><br />C5 - 2019)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="personalinfo">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Personal Info</h1>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p></p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="workexper"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="cert"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </main>&nbsp; </body></html>注意： HTML 文件中的主要更改是，我还将最后一个 div 放入了class="cert"网格容器本身中。

Answer 3

.resume-body {&nbsp; background-color: #1f2021;}.wrapper-body-resume {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; display: flex;&nbsp; flex-direction: column;}/* Header */.header-resume {&nbsp; font-family: Arial;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&nbsp; background-repeat: no-repeat;&nbsp; margin: 0;&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 350px;&nbsp; z-index: 1;&nbsp; box-sizing: border-box;&nbsp; display: flex;&nbsp; flex-direction: row-reverse;&nbsp; background: linear-gradient(to right, rgb(46, 46, 46), rgb(0, 0, 0));}.GP {&nbsp; background: url(../Resources/Aljon-GP.png);&nbsp; width: 100%;&nbsp; height: 500px;&nbsp; background-size: contain;&nbsp; background-repeat: no-repeat;&nbsp; bottom: 150px;&nbsp; left: 400px;&nbsp; position: relative;}.name-left {&nbsp; text-align: center;&nbsp; box-sizing: border-box;&nbsp; justify-content: center;&nbsp; width: 50%;&nbsp; height: 100%;&nbsp; padding: 80px 0 0 0;&nbsp; margin: 0;&nbsp; left: 300px;&nbsp; position: relative;}.name-left h1 {&nbsp; line-height: 0;&nbsp; font-size: 30px;&nbsp; color: #ffffff;}.name-left p {&nbsp; color: #999999;}.body-resume {&nbsp; width: 100%;&nbsp; padding: 10px 20px;&nbsp; box-sizing: border-box;&nbsp; background-color: rgb(255, 255, 255);}.about {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; font-family: Arial;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}.about h1 {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; font-size: 20px;&nbsp; font-family: Arial;&nbsp; color: #1f2021;}.about p {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; font-size: 16px;&nbsp; font-family: Arial;&nbsp; font-style: italic;}.personalinfo {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; font-family: Arial;&nbsp; width: 22%;&nbsp; height: 500px;&nbsp; box-sizing: border-box;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}.personalinfo h1 {&nbsp; padding: 10px;&nbsp; margin: 5;&nbsp; font-size: 20px;&nbsp; font-family: Arial;&nbsp; color: #1f2021;}.personalinfo p {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; font-size: 16px;&nbsp; font-family: Arial;&nbsp; font-style: italic;}.column1 {&nbsp; display: flex;&nbsp; flex: row;}.education {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; width: 30%;&nbsp; box-sizing: border-box;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);&nbsp; display: flex;&nbsp; flex-direction: column;}.education h1 {&nbsp; padding: 10px;&nbsp; margin: 5;&nbsp; font-size: 20px;&nbsp; font-family: Arial;&nbsp; color: #1f2021;}.education p {&nbsp; padding: 10px;&nbsp; margin: 5px;&nbsp; font-size: 16px;&nbsp; font-family: Arial;&nbsp; font-style: italic;}.workexper {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; font-family: Arial;&nbsp; width: 100%;&nbsp; height: 500px;&nbsp; box-sizing: border-box;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}.cert {&nbsp; padding: 5px;&nbsp; margin: 10px;&nbsp; font-family: Arial;&nbsp; width: 50%;&nbsp; height: 500px;&nbsp; box-sizing: border-box;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}<main>&nbsp;<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">&nbsp; &nbsp; <h1>About me</h1>&nbsp; &nbsp; <p>I .</p></div><div class="column1"><div class="education">&nbsp; &nbsp; <h1>Education</h1>&nbsp; &nbsp; <p><b><u>Elementary</u></b></p>&nbsp; &nbsp; <p><i><b>Sool</b></i><br>An9)</p>&nbsp; &nbsp; <p><i><b>Scia</b></i><br>P11)</p>&nbsp; &nbsp; <p><b><u>High School</u></b></p>&nbsp; &nbsp; <p><i><b>Hemy</b></i><br>An 2012)</p>&nbsp; &nbsp; <p><i><b>Frol</b></i><br>Po4)</p>&nbsp; &nbsp; <p><i><b>Ju</b></i><br>C 2015)</p>&nbsp; &nbsp; <p><b><u>College</u></b></p>&nbsp; &nbsp; <p><i><b>Uninan</b></i><br>C5 - 2019)</p></div><div class="personalinfo">&nbsp; &nbsp; <h1>Personal Info</h1>&nbsp; &nbsp; <p></div><div class="workexper"></div><div class="cert"> <!--I have moved this into your column div!--></div></div></div></div></main>您只需将“cert”div 移动到“column”div 中，因为您在列上显示了 flex