【问题标题】:CSS - How to position a fixed sidebar div relatively to a centered content divCSS - 如何相对于居中的内容 div 定位固定的侧边栏 div
【发布时间】:2014-07-04 06:18:56
【问题描述】:

基本上,我有一个固定的侧边栏(具有固定宽度)和一个内容 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,它显示了我尝试做的事情,但仅在大分辨率下显示良好。

感谢您的帮助。

【问题讨论】:

    标签: html css css-position center fixed


    【解决方案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 调整大小。

    【讨论】:

    • 谢谢,我没有想到使用填充代替边距,似乎是要走的路。当有足够的可用空间时,唯一缺少的是主要内容居中。在您的示例中,它确实居中 [侧边栏 + 主要内容]。除了包装器/容器中较大的最大宽度外,我还向主内容添加了一个较小的最大宽度,现在它似乎工作得很好。
    • 几乎是我要找的,但我不希望侧边栏滚动:-(
    猜你喜欢
    • 1970-01-01
    • 2015-10-29
    • 2019-02-18
    • 1970-01-01
    • 2012-04-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多