如何在flexbox布局下将子div定位到父header div右侧？

先指出你代码里的问题：

• 你说用Flexbox构建页面，但.header根本没开启动态布局，反而给.child加了绝对定位，完全偏离了Flexbox的用法逻辑
• CSS代码里有个多余的闭合大括号（/*header image*/下面的}），会导致样式解析出错

直接改这几处就能搞定：

修改后的CSS代码 #

/* Style the header */
.header {
  position: relative;
  background-image: url("images/code.jpg");
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  padding: 10px 30px 20px 150px; /* 左侧padding给侧边栏预留空间 */
  font-size: 30px;
  text-shadow: 4px 4px darkorange;
  /* 启用Flexbox核心布局 */
  display: flex;
  justify-content: space-between; /* 让左右元素自动贴向两端 */
  align-items: center; /* 垂直方向居中对齐，可根据需求调整为flex-start/flex-end */
}

.child{
  width:100px;
  height:100px;
  background-color:#999999;
  /* 移除绝对定位，交给Flexbox处理布局 */
}

/* 侧边栏固定定位补充 */
.sidenav {
  position: absolute;
  left: 0;
  top: 0;
  width: 150px; /* 和header的left padding对应，避免遮挡内容 */
}

修改后的HTML代码 #

<div class="header">
  <!-- 把左侧文本打包成一个容器，避免Flexbox拆分单个元素 -->
  <div class="left-content">
    <h1>Eric Launderville</h1>
    <p style="font-size: 35px">IT Support Specialist</p>
  </div>

  <!-- 右侧轮播容器 -->
  <div class="child">
    轮播图容器
  </div>

  <div id="mySidenav" class="sidenav">
      <a href="#" id="home"><i class="fa-solid fa-house fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Home</a>
      <a href="#" id="about"><i class="fa-solid fa-laptop-code fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp; </i>About</a>
      <a href="#" id="contact"><i class="fa-solid fa-address-book fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Contact</a>
      <a href="#" id="email"><i class="fa-solid fa-at fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>E-mail</a>
      <a href="#" id="facebook"><i class="fa-brands fa-facebook fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>Facebook</a>
      <a href="#" id="linkedin"><i class="fa-brands fa-linkedin-in fa-beat-fade fa-lg" style="color: #ffffff;">&nbsp; &nbsp;</i>LinkedIn</a>
  </div>
</div>

关键逻辑说明 #

• 给.header添加display: flex后，内部子元素自动变成flex项，justify-content: space-between直接实现左右元素的两端对齐效果
• 左侧文本打包成容器，保证标题和段落作为一个整体在左侧展示
• 侧边栏用绝对定位固定在左侧，宽度和header的左padding对应，避免遮挡主内容

内容的提问来源于stack exchange，提问作者Eric L