如何在居中内容旁添加可换行的固定/绝对定位侧边目录？

需求说明 #

已有一个居中的黄色内容条（max-width:200px），需在其左侧或右侧添加目录：

• 目录使用absolute/fixed定位
• 与内容条保持少量水平间距
• 文本从内容条延伸至body边界，过长时自动换行

问题分析 #

你尝试的代码中，absolute定位的目录未设置有效宽度约束，导致文本无法自动换行。需通过定位属性动态计算目录的宽度范围。

解决方案 #

左侧目录实现 #

* {
  box-sizing: border-box;
}

body {
  margin: 5px;
  position: relative; /* 让absolute元素相对于body定位 */
}

#stripe {
  max-width: 200px;
  margin: 0 auto;
  background-color: yellow;
  min-height: 100vh; /* 保证内容条高度足够，方便查看布局 */
}

#toc {
  position: absolute;
  top: 0;
  left: 5px; /* 对齐body的margin */
  right: calc(50% + 200px/2 + 10px); /* 右侧位置：视口中线 + 内容条一半宽度 + 间距 */
  background-color: blue;
  color: white;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="toc">
    <p>this text is so long and it doesn't break which is bad? No, now it wraps perfectly from body edge to the content stripe</p>
    <ul>
      <li>Chapter 1: Intro</li>
      <li>Chapter 2: Main Content</li>
      <li>Chapter 3: Advanced Topics</li>
    </ul>
  </div>
  <div id="stripe">
    <main>
      <p>this</p>
      <p>is</p>
      <p>an</p>
      <p>example</p>
      <p>for</p>
      <p>some</p>
      <p>cool</p>
      <p>content</p>
    </main>
  </div>
</body>
</html>

右侧目录实现 #

只需修改#toc的定位属性：

#toc {
  position: absolute;
  top: 0;
  right: 5px; /* 对齐body的margin */
  left: calc(50% + 200px/2 + 10px); /* 左侧位置：视口中线 + 内容条一半宽度 + 间距 */
  background-color: blue;
  color: white;
}

关键要点 #

1. body设置relative：确保absolute定位的目录以body为参考容器
2. 动态宽度计算：通过calc()结合视口中线、内容条宽度和间距，自动确定目录的左右边界，无需固定width
3. 间距控制：calc()中的10px就是目录和内容条的水平间距，可按需调整
4. 内容条高度：给#stripe加min-height:100vh，方便在内容较少时也能看到完整布局效果

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