如何将盒子定位到网站右侧？flex-end设置无效求助

你遇到的核心问题是flex容器方向错误+布局结构不合理：

• 你的.container设置了flex-direction: column，此时justify-content控制的是垂直方向的元素排列，和你想要的水平右侧对齐完全无关；水平方向的对齐需要用align-items，但这也不是你要的——你需要的是左侧文本和右侧盒子水平并排，而非垂直堆叠。
• 当前左侧文本（text1、text2）和右侧占位盒子（text3）都是.container的直接子元素，在垂直flex方向下会自动上下排列，自然没法把盒子放到页面右侧。

具体修改步骤 #

1. 把左侧文本和右侧盒子包裹进一个新的水平flex容器，让二者能并排显示
2. 给这个新容器设置统一的左右padding，替代原text1、text2的零散padding-left
3. 把占位文本放到定义好样式的.placeholder盒子里，让灰色盒子样式生效
4. 调整容器高度和导航定位，避免内容溢出或重叠

修改后的完整代码 #

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  min-height: 90vh; /* 改用min-height避免内容溢出，给footer留空间 */
  background-color: #1f2937;
  padding-top: 60px; /* 给顶部logo和导航留空间 */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10vh;
  background-color: #1f2937;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: white;
  padding-top: 15px;
  padding-left: 200px;
  position: absolute; 
  top: 0;
}

.navbar {
  color:white;
  font-size: 18px;
  position: absolute; /* 把fixed改成absolute，避免和下方内容重叠 */
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 15px;
  padding-right: 200px;
}

.navbar ul li {
  list-style: none;
  display: inline-block;
  margin: 0 20px; 
}
.navbar ul li a {
  color: white;
  text-decoration: none; /* 修复导航链接默认样式 */
}

/* 新增水平容器：承载左侧文本和右侧盒子 */
.hero-content {
  display: flex;
  justify-content: space-between; /* 让左右元素两端对齐 */
  align-items: center; /* 垂直居中对齐 */
  padding: 0 200px;
  min-height: 80vh;
}

.text-group {
  width: 520px;
}

.text1 {
  color: white;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
}
.text2{
  color: white;
  font-size: 18px;
}

.placeholder{
  width: 500px;
  height:350px;
  background-color: grey;
  display:flex;
  align-items:center;
  justify-content:center;
  color: white;
}

HTML

<!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="hero-content">
      <div class="text-group">
        <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>
      <!-- 占位文本放入样式盒子中 -->
      <div class="placeholder">this is a placeholder for an image</div>
    </div>
  </div>
  <div class="footer">
    Copyright © The Odin Project 2023
  </div>
</body>
</html>

关键修改说明 #

• 移除.container的flex-direction: column，改用.hero-content作为水平flex容器，通过justify-content: space-between直接实现左右元素两端对齐，刚好满足你要的右侧盒子带200px右内边距的需求。
• 将navbar的position: fixed改为absolute，同时给.container加padding-top，避免导航遮挡下方内容。
• 给导航链接添加样式，修复默认的蓝色和下划线问题。
• 将占位文本移入.placeholder盒子，让你定义的灰色容器样式生效。

内容的提问来源于stack exchange，提问作者Tuan Nguyen