我在做一个网站，我把所有的东西都包装在这个代码块里，它把所有的东西都很好地放在网页的中间，宽度为780像素。我确实计划让它更具响应性，但现在这正是我希望我的网站在大显示器上看起来的样子。因为宽度的原因，有足够的空间放一个小菜单，我可以把它放在主要内容的最左边。我希望这个菜单包括像用户的名字，职位和其他基本信息。一个例子就是你登录后LinkedIn页面的外观。当我尝试包含代码时，它将自己设置在我的主要内容的顶部，而不是左侧。

.content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
}

.sidenav {
  border: 1px solid black;
}

<main class="content">
  <div class="sidenav">
    ...
  </div>
  <div class="main__home">
    <form action="" method="POST">
      ...
    </form>
  </div>
</main>

可以添加display:flex；敬。满足于让他们并肩而立。 若要解决大小调整问题，可以设置。基于flex的侧导航宽度:150像素；(或者可能是另一个值)然后加上flex-grow:1；敬。main__home，它将填充宽度的其余部分。 下面是完整的css:

.content {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
  display: flex;
}

.sidenav {
  border: 1px solid black;
  flex-basis: 100px;
}

.main__home {
  flex-grow: 1;
}

如果你想在主内容的左边挂一个菜单，那么在你的容器上使用position: relative创建一个新的包含块，然后在侧边栏上使用position: absolute。使用right: 100%将它一直推到块的左侧(这听起来与直觉相反，但它将侧导航的左侧边缘一直推到容器之外)。

对于小于总宽度的屏幕尺寸，请使用媒体查询来更改其显示方式。

.content {
  position: relative; /* define a new containing block */
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  width: 780px;
  border: 1px solid gray;
  border-radius: 0.25rem;
}

.main__home {
  background: lightgray;
}

.sidenav {
  position: absolute; /* added this */
  right: 100%; /* push the right hand edge all the way to the left edge of the container */
  
  /* this is all just prettification */
  border: 1px solid black;
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  flex-direction:column;
  gap: 0.5rem;
  background: #333;
  color: white;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<main class="content">
  <div class="sidenav">
     <i class="fa-solid fa-house"></i>
    <i class="fa-solid fa-magnifying-glass"></i>
    <i class="fa-solid fa-circle-info"></i>
  </div>
  <div class="main__home">
    <form action="" method="POST">
      main
    </form>
  </div>
</main>