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

Question

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

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

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

我尝试了很多解决方案(带有假边距 block 的 float block 、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 调整大小而调整大小。