我在做一個網站，我把所有的東西都包裝在這個代碼塊里，它把所有的東西都很好地放在網頁的中間，寬度為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"  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>