CSS - 如何相对于居中的内容 div 定位固定的侧边栏 div

Question

基本上，我有一个固定的侧边栏（具有固定宽度）和一个内容 div（具有最大宽度）。

我希望内容 div 居中，侧边栏位于该内容 div 的左侧。

问题是，在小屏幕上或缩小窗口大小时，内容 div 必须缩小而不是推动侧边栏。

我尝试了很多解决方案（带有假边距块的浮动块，display:inline-block 和 white-space: nowrap），但没有成功。

这是实际页面：http://daimao.info/logique-monde-esprit?testCSS=3，它非常适合屏幕大小，但所有内容都在窗口左侧。

这是一个修改后的页面：http://daimao.info/logique-monde-esprit?testCSS=1，它显示了我尝试做的事情，但仅在大分辨率下显示良好。

感谢您的帮助。

Answer 1

Here is an example of what I think you're after:

1. 代码结构如下：

   <div class="container">
       <div class="sidebar">
           Sidebar content
       </div>
       <div class="content">
           Content
       </div>
   </div>
   

2. 通过将固定的padding-left 值添加到.container，为侧边栏创建固定空间

3. 将侧边栏宽度设置为相同的值，float 向左，并给它一个相同值的负数margin-left

边栏将保持相同大小，并在容器调整大小时继续填充容器的padding-left。 .content 将填充.container 内的剩余空间，调整为.container 调整大小。