如何调整Sidebar位置，使其固定在主文本左侧而非下方？

要让侧边栏默认显示在主内容左侧，核心是给包含主内容与侧边栏的容器设置合理的布局规则，让内部元素从垂直排列改为水平排列。以下是具体修改方案：

关键修改步骤 #

1. 给.main-wrapper添加Flex布局 #

当前.main-wrapper没有布局约束，导致内部元素自动垂直堆叠。添加Flex属性可实现水平排列：

.main-wrapper {
  display: flex;
  gap: 2rem; /* 主内容与侧边栏的间距 */
  max-width: 1200px; /* 限制整体宽度，避免页面过宽 */
  margin: 0 auto; /* 让整体布局居中 */
}

2. 让主内容区域占据剩余空间 #

设置主内容容器的flex:1，使其自动填充侧边栏以外的剩余宽度：

.middle-wrapper {
  flex: 1;
  max-width: 960px;
  padding: 25px;
  border: 3px solid #ffffff;
}

3. 移除无效的Grid设置 #

原代码中.page-wrapper的grid-template-columns: 100%未起到实际作用，可替换为页面内边距优化显示：

.page-wrapper {
  padding: 0 1rem; /* 给页面添加左右内边距，适配小屏幕 */
}

4. （可选）移动端适配 #

添加媒体查询，在小屏幕设备上恢复垂直布局，提升移动端体验：

@media (max-width: 768px) {
  .main-wrapper {
    flex-direction: column;
  }
  .sidebar {
    max-width: 100%;
  }
  .boxed {
    width: 100%;
  }
}

修改后的完整代码 #

CSS代码 #

.page-wrapper {
  padding: 0 1rem;
}

.main-wrapper {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.middle-wrapper {
  flex: 1;
  max-width: 960px;
  padding: 25px;
  border: 3px solid #ffffff;
}

.main-page-content {
  margin-bottom: 0.5rem;
  padding: 0;
}

.title1 {
  font-family: tahoma;
  font-size: 20px;
  text-align: center;
  margin-bottom: 2rem;
}

p {
  margin: 1rem 0 2rem;
}

.callout {
  background: rgba(238, 238, 238, 0.395);
  border-radius: var(--elem-radius);
  box-shadow: rgb(95, 95, 95);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
  padding: 2rem;
  text-align: left;
}

.boxed {
  border: 1px solid rgb(78, 78, 78);
  padding: 1rem;
  width: 37em;
  margin-left: auto;
  margin-right: auto;
}

.textinrect {
  word-spacing: 100px;
}

.sidebar {
  padding-top: 3rem;
  max-width: 200px;
}

.list {
  list-style: none;
  padding-left: 0.5em;
}

.sidebar-heading {
  color: Black;
  font-size: 18px;
  font-family: tahoma;
  letter-spacing: 1.5px;
  margin-left: 7px;
}

.subject-header {
  color: rgba(0, 0, 0, 0.749);
  font-size: 14px;
  font-family: tahoma;
  letter-spacing: 1px;
}

.subject {
  margin-bottom: 1em;
}

.toggle {
  margin-bottom: 15px;
}

.sub-topic {
  color: black;
}

.toggle1 {
  padding-top: 1em;
}

.toggle0 {
  list-style: none;
  padding-left: 1.5em;
}

a {
  text-decoration: none;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .main-wrapper {
    flex-direction: column;
  }
  .sidebar {
    max-width: 100%;
  }
  .boxed {
    width: 100%;
  }
}

HTML代码（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="fortest.css">
</head>
<body>
<div class="page-wrapper">
<div class="main-wrapper">
  <div class="middle-wrapper">
    <article class="main-page-content">
      <h2 class="title1">How to create an HTML website</h2>
      <div class="section1">
        <p>1. Nav Bar</p>
        <div class="callout">
          <div class="boxed">
            <div class="textinrect">
              Yourwebsitename home about page3
            </div> 
          </div>
        </div>
      </div>
    </article>
  </div>
  <aside class="sidebar">
    <nav class="sidebar-inner">
      <p class="sidebar-heading">Subjects</p>
      <div>
        <ol class="list">
          <li class="subject">
            <a href="#">
              <h5 class="subject-header">Subject1</h5>
            </a>
          </li>
          <li class="toggle"> 
            <details>
              <summary>
              All the school sunjects
              </summary>
              <ol class="toggle0">
                <li class="toggle1">
                  <a class="sub-topic" href="#">The molecular mass and power</a>
                </li>
                <li class="toggle1">
                  <a class="sub-topic" href="#">the molecular mass and power</a>
                </li>
              </ol>
            </details>
          </li>
          <li class="toggle"> 
            <details>
              <summary>
              Not all school subjects
            </summary>
            </details>
          </li>
        </ol>
      </div>
    </nav>
  </aside>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Gerge Gansky