<p>我在这里遇到了一个问题，我试图将一个盒子放在网站的右侧，但不知道为什么它不起作用，我尝试使用<code>justify-content: flex-end;</code>将盒子对齐到页面的“末尾”，然后添加<code>padding-right</code>为<code>200px</code>，但可惜这并不起作用。对于解释方面的任何帮助将不胜感激。</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
height: 50vh;
background-color: #1f2937;
position: static;
display: flex;
flex-direction: column;
justify-content: center;
}
.footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 10vh;
background-color: #1f2937;
color: white;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
font-size: 24px;
font-family: 'Times New Roman', Times, serif;
color: white;
justify-content: space-between;
padding-top: 15px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
padding-left: 200px;
position: absolute;
top: 0;
}
.navbar {
color:white;
font-size: 18px;
position: fixed;
width: 85%;
top: 0;
right: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: row;
padding-top: 15px;
padding-right: 200px;
}
.navbar ul li {
list-style: none;
display: inline-block;
margin: 0 20px;
text-decoration: none;
}
.text1 {
position: relative;
color: white;
padding-left: 200px;
font-size: 48px;
font-weight: bold;
width: 720px;
}
.text2{
color: white;
font-size: 18px;
padding-left: 200px;
width: 520px;
}
.text3{
text-align: center;
display:flex;
align-items:center; /*vertical center*/
justify-content:right; /*horizontal center*/
width: 500px;
height:350px;
background-color: grey;
}
</pre>
<pre class="brush:html;toolbar:false;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="logo">
<h2>Header Logo</h2>
</div>
<div class="navbar">
<ul>
<li><a href="index.html">header link one</a></li>
<li><a href="index.html">header link two</a></li>
<li><a href="index.html">header link three</a></li>
</ul>
</div>
<div class="text1">
<h2>This website is awesome</h2>
</div>
<div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast</div>
<div class="text3">this is a placeholder for an image</div>
</div>
<div class="footer">
Copyright © The Odin Project 2023
</div>
</body>
</html></pre>
<p><br /></p>
<p>我尝试使用justify-content:flex-end来对齐它，但是我已经束手无策了，说实话，对于我的问题的解释将非常有帮助，我只包含了必要的CSS代码和整个HTML文件。提前感谢大家的帮助！</p>
1
1378
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
首先，你使用了flex属性，尽管你还没有设置display:flex;
其次，要使一个div向右移动（例如box）：（根据需要进行缩进）
.container{ display:flex; align-items:center; /*垂直居中*/ justify-content:right; /*水平居中*/ }``` #text{ display:block; }