CSS固定左侧，流动右侧，在固定宽度内居中。

Question

我用CSS创建了一个图像，想要实现的效果如下。我还在JSFiddle中进行了小规模的设置。

问题在于，我可以创建所有内容，但是无法创建右侧的流体列。我将其用于幻灯片中显示图像，希望它们从屏幕右侧出现，并在内容1的左侧“消失”。

我尝试了绝对、相对和固定位置。但结果要么是失去了内容1居中的位置，要么是没有一个流体列延伸到第二列的右侧。

- mat

---

你想让滑块存在于容器B之外，这样你的正常内容就可以适应容器B内，但是滑块图像可以延伸到屏幕边缘吗？ - Andrew Morris

是的，这是一个视差幻灯片。我希望内容从屏幕右侧显示，并滑动到最左边（即内容1的右侧）。 - mat

Answer 1

你需要使用width:100%来填满整个屏幕，http://jsfiddle.net/a9Yda/2/

- Paul Bremer

---

是的，但那样我会失去居中和固定位置。 - mat

Answer 2

这是您要找的代码吗？

我在右侧div中添加了固定位置和最小宽度，似乎已经实现了您想要的效果。

- Andrew Morris

---

这就是代码！谢谢，我刚在Opera、FF、Chrome、Safari和Iexplorer 8、9、10上测试了一下，它可以正常工作，即使使用视差效果也没问题。所以基本上我应该使用fixed和min-width。感谢您的帮助！我接受并点赞了您的答案。 - mat

我发现iPad上的Safari和Win 7上的Iexplorer 9不需要边距。因此，在这两个浏览器中，布局看起来混乱。在所有浏览器中，我也缺少垂直滚动条。您是否知道解决方法？我可以为每个浏览器使用几个类，但这无法解决滚动问题。提前致谢。 - mat

固定为绝对定位解决了跨浏览器的滚动问题。现在我只在iexplorer中使用margin:0来修复它。 - mat