我正在寻找以下问题的HTML / CSS解决方案。
我目前在网页左侧有一个侧边栏类型的元素。在右侧，我想放置几个信息面板。我希望这些信息面板根据窗口的大小调整自身大小，同时保留在侧边栏的右侧。我想为所有这些面板设置单独的背景，以使每个面板都有独特的感觉（想像一下PowerPoint，但效果更好）。
为了完成所有这些操作，我在网站上设置了固定div作为侧边栏，宽度必须恰好为92px。我在这个固定div的右边还有几个div。我需要在右侧的“面板” div根据视口的宽度调整自身大小，因此当前我将其宽度设置为屏幕的100％。为了确保不管背景图片的大小如何，背景图片都适合“面板” div，我使用的是background-size:contain;线条。
一切都可以正常工作，只有一件事：“面板” div位于固定div的下面，并且这些div的背景图像被切除。我做了一个JSFiddle来强调这一点：http : //jsfiddle.net/32yZL/
您会注意到，三行文本显示为“这是一个测试。这是一个测试。这是一个测试。” 在左侧被切断。通过在div中添加92px的填充可以很容易地解决此问题，但是对于“ panel” div的背景图片，我一直找不到类似的解决方案。
有什么建议？
编辑：谢谢大家的答复。我已经尝试了所有方法，但没有一个起作用，我认为这是我的错。我不知道JSFiddle可以导入外部文件（是的，我知道，我是盲人的），并且我创建了一个新文件，希望可以更好地强调这个问题：
http://jsfiddle.net/ChrisBush/womLk4c9/
您会注意到div的背景图像仍在侧边栏的后面，但是文本很好。我希望背景图片与边栏齐平放置。有什么建议？
编辑2：在对该项目进行更多工作之后，我开始意识到针对此问题有几种解决方案。不幸的是，我使用了一些从Web站点上提取的免费js，以在该站点上创建视觉效果，这使事情复杂化了许多，超出了本文的范围，并使大多数答案无关紧要。我想我将尝试重写一些js，为此，我将在其他地方发表另一篇文章。再次感谢您的所有建议！
我把右边的幻灯片包裹在一张<div id="slide_wrap">我给的幻灯片中margin-left: 92px;。
这样可以防止它们进入固定的侧边栏。
编辑：响应您的代码编辑，此问题不是因为它在侧边栏下面，而是背景被固定了。如果您fixed从后台声明中删除了，则可以对其进行修复。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句