css - 将两个 div 并排居中，但一个 div 位置固定

Question

我有一个包含 2 个 div 的容器，我想并排出现在页面中央。左侧将是各种导航，右侧将具有可变长度的内容。当我向上和向下滚动页面时，我希望左侧 div 被“固定”。这是一个总体结构；随意建议其他居中CSS。提前致谢。

#content{
  margin: 0 auto;
}
#left{
  display:inline-block;
}
#right{
  display:inline-block;
}

<div id="content">
  <div id="left">
  </div>
  <div id="right">
  </div>
</div>

Answer 1

您的代码有点短，无法正确回答，但我会说：

#content {
     text-align:center;
}
#left,#right{
     display:inline-block;
}
#left {
     width:200px;
}
#left > div.fixed {
     position:fixed;
     width:inherit;
}

如果您有一些现实生活中的代码可以使用并满足您的需求，它将对您有所帮助。

#left 的子项将成为您的固定内容的容器。#left，在流程中将保留所需的空间。