如何将<aside>移动到页面的左侧
如何将<aside>移动到页面的左侧
提问于 2022-07-31 15:55:50
这是我的第一个HTML页面，我是个初学者。做一个在线视频HTML课程。
左边的黑色部分并不完全粘在左边，还有一些白色的空隙。我想把它完全移到左边。
比较以下几点：
我的页面：https://velvety-kataifi-c1a647.netlify.app/
vs
它应该是什么样的：https://superlative-narwhal-c0f1e9.netlify.app/。
尝试使用边距、位置绝对/固定/相对等，但无法像在https://superlative-narwhal-c0f1e9.netlify.app/中那样取得效果。
这是HTML：
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CV Alexander Marabou</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<main>
<div class="main-content">
<h2><span class="job-title-main">Front-End Developer</span></h2>
<h1><span class="main-name">John Doe</span></h1>
<p class="list-primary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis
ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas
accumsan lacus vel facilisis.
</p>
</div>
<div class="main-content-projects">
<h2 class="header-primary">Projects</h2>
<ol class="list-primary">
<li>
<a href="https://barbershop-pl.goit.global"
>https://barbershop-pl.goit.global/</a
>..............<span class="bold-brackets-main">[</span> HTML5,
CSS3 <span class="bold-brackets-main">]</span>
</li>
<li>
<a href="https://cryptohub.goit.global"
>https://cryptohub.goit.global/</a
><span class="dots-lines-main">......................</span
><span class="bold-brackets-main"> [</span> JavaScript
<span class="bold-brackets-main">]</span>
</li>
<li>
<a href="https://kidslike.goit.global"
>https://kidslike.goit.global/</a
>..............................<span class="bold-brackets-main"
>[</span
>
React.js, Node.js <span class="bold-brackets-main">]</span>
</li>
</ol>
</div>
<div class="main-content-experience">
<h2 class="header-primary">Work Experience</h2>
<h3 class="job-name">
Front-End Developer <span class="orange-company">Freelance</span>
</h3>
<p class="year-experience">September 2019 - up to now | Country</p>
<ul class="list-primary">
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Risus commodo viverra maecenas.</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod.
</li>
</ul>
</div>
<div class="main-content-glory-new">
<h3>Manager <span class="orange-company">Glory New</span></h3>
<p class="year-experience">March 2015 - October 2018 | Country</p>
<ul class="list-primary">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Risus commodo viverra maecenas.</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod.
</li>
</ul>
</div>
<div class="main-content-glory-llc">
<h3>Manager <span class="orange-company">Glory LLC</span></h3>
<p class="year-experience">June 2014 - February 2015 | Country</p>
<ul class="list-primary">
<li>
<span class="list-primary-item"
>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span
>
</li>
<li>
<span class="list-primary-item"
>Risus commodo viverra maecenas.</span
>
</li>
<li>
<span class="list-primary-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod.</span
>
</li>
</ul>
</div>
<div class="main-content-education">
<h2>Education</h2>
<h3 class="university-color">National University</h3>
<h4 class="management-font">Management</h4>
<p class="year-experience">September 2009 - June 2014 | Country</p>
</div>
</main>
<aside>
<img
class="cv-photo"
src="photo.jpg"
width="370"
alt="Zdjęcie Johna Doe"
/>
<div class="contact-block">
<h2 class="header-secondary">Contact</h2>
<p class="contact-links">
<span class="bold">C:</span>
<a class="contact-links" href="tel:+7 777 777 77 77"
>+7 777 777 77 77</a
>
<br />
<span class="bold">E:</span>
<a class="contact-links" href="mailto:johndoe@gmail.com"
>johndoe@gmail.com</a
>
</p>
</div>
<div class="tech-skills-block">
<h2 class="header-secondary">Tech Skills</h2>
<ul class="list-secondary">
<li><span class="list-secondary-item">HTML5</span></li>
<li><span class="list-secondary-item">CSS3</span></li>
<li><span class="list-secondary-item">GIT</span></li>
<li><span class="list-secondary-item">WebPack</span></li>
<li><span class="list-secondary-item">JavaScript</span></li>
<li><span class="list-secondary-item">React.js</span></li>
<li><span class="list-secondary-item">Node.js</span></li>
</ul>
</div>
<div class="soft-skills-block">
<h2 class="header-secondary">Soft Skills</h2>
<ul class="list-secondary">
<li><span class="list-secondary-item">Scrum</span></li>
<li><span class="list-secondary-item">Agile</span></li>
<li><span class="list-secondary-item">GTD</span></li>
<li><span class="list-secondary-item">Teamwork</span></li>
</ul>
</div>
</aside>
</div>
</body>
</html>这是我的CSS：
body {
font-family: "Montserrat", sans-serif;
background: #f5f7fa;
}
.wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center;
width: 1200px;
margin: 0 auto;
background: #ffffff;
box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.1);
}
aside {
width: 370px;
background: #1e2939;
}
.cv-photo {
margin-top: 40px;
}
.header-secondary {
color: #ffffff;
}
.contact-links {
color: #ffffff;
font-size: 14px;
line-height: 24px;
}
.bold {
font-weight: 700;
}
.list-secondary {
color: #fb6d3a;
font-size: 14px;
line-height: 24px;
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
}
.list-secondary-item {
color: #ffffff;
}
.contact-block {
margin-top: 51px;
margin-left: 40px;
}
.tech-skills-block {
margin-top: 47px;
margin-left: 40px;
}
.soft-skills-block {
margin-top: 47px;
margin-left: 40px;
}
.main-content {
margin-top: 85px;
margin-left: 88px;
width: 400px;
height: 247px;
left: 498px;
top: 125px;
}
.main-content-projects {
margin-top: 40px;
margin-left: 88px;
margin-bottom: 51px;
}
.main-content-experience {
margin-top: 51px;
margin-left: 88px;
}
.main-content-glory-new {
margin-top: 16px;
margin-left: 88px;
}
.main-content-glory-llc {
margin-top: 20px;
margin-left: 88px;
}
.main-content-education {
margin-top: 43px;
margin-left: 88px;
margin-bottom: 107px;
}
.year-experience {
color: #a8a8a8;
font-size: 12px;
font-weight: 400;
line-height: 15px;
margin-top: 11px;
margin-bottom: 8px;
}
.university-color {
color: #fb6d3a;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.management-font {
font-weight: 700;
font-size: 14px;
line-height: 17px;
margin-bottom: 12px;
margin-top: 11px;
}
.list-primary {
color: #595959;
font-weight: 400;
font-size: 14px;
line-height: 24px;
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
width: 509px;
}
.list-primary-item {
color: #595959;
font-weight: 400;
font-size: 14px;
line-height: 24px;
}
.header-primary {
font-weight: 700;
font-size: 22px;
line-height: 27px;
margin-bottom: 12px;
}
.job-name {
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.orange-company {
color: #fb6d3a;
font-weight: 700;
font-size: 16px;
line-height: 20px;
}
.main-name {
font-weight: 700;
font-size: 45px;
line-height: 55px;
}
.job-title-main {
font-weight: 700;
font-size: 14px;
line-height: 17px;
}
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
margin-left: 0px;
padding-left: 0px;
list-style-position: inside;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2.7em;
list-style-type: none;
counter-increment: item;
list-style-position: inside;
}
ol > li:before {
display: inline-block;
width: 1.5em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
font-weight: 700;
font-size: 14px;
line-height: 24px;
}
.bold-brackets-main {
font-weight: 700;
font-size: 14px;
line-height: 24px;
color: #000000;
}
.dots-lines-main {
color: #a8a8a8;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2022-07-31 16:08:24
这取决于你到底想要什么。但是，下面是将aside元素完全移动到左侧的步骤：
1.)您将一个固定的width (1200 of )应用于.wrapper，这防止了大窗口中aside的左对齐。把它移开。
2.)将flex-grow: 1;添加到main，使其能够填充整个页面(即除aside之外的所有内容)。
3.)将margin: 0添加到body以删除默认页边距。
Stack Overflow用户
发布于 2022-07-31 16:02:20
通过添加CSS更改div中项与类wrapper的对齐方式：
justify-content: left;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73184771
复制相关文章
相似问题
腾讯云开发者
