我希望 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>
3 回答
慕运维8079593
TA贡献1876条经验 获得超5个赞
您需要将这两个 div 放入另一个 div 中。因此，包含工作经验和个人信息的 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>
千巷猫影
TA贡献1829条经验 获得超7个赞
CSS-Grid被证明是使用简洁代码实现此类布局的强大工具。一旦您应用 @media 查询在小屏幕上运行您的应用程序，这就是一个非常方便的工具，因为这不遵循顺序。我们可以将网格项放置在网格上的任何位置。
这是演示。
.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;
}
.column1 {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(5, 125px);
gap: 0.5rem;
}
.education {
padding: 5px;
margin: 10px;
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;
grid-column: 1/3;
grid-row: 1/6;
}
.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;
}
.personalinfo {
padding: 5px;
margin: 10px;
font-family: Arial;
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);
grid-column: 3/5;
}
.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;
}
.workexper {
padding: 5px;
margin: 10px;
font-family: Arial;
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);
grid-column: 5/9;
}
.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);
grid-column: 3/9;
grid-row: 5/6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<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></p>
</div>
<div class="workexper"></div>
<div class="cert"></div>
</div>
</div>
</div>
</main>
</body>
</html>
注意： HTML 文件中的主要更改是，我还将最后一个 div 放入了class="cert"网格容器本身中。
慕神8447489
TA贡献1780条经验 获得超1个赞
.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: 22%;
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: 100%;
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="personalinfo">
<h1>Personal Info</h1>
<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
添加回答
举报
0/150
提交
取消