带有水平滑动内容的底部div

Question

我需要一个总是位于页面底部的div，左边是172px，右边是383px。

这个div将有一些图像和文本以及左右按钮。 例如，当您将鼠标悬停在右侧按钮时，在达到div的宽度限制后，“不可见”的内容将从右侧开始显示，滑动左侧的内容。

我尝试使用position:fixed; bottom:0px position:fixed; bottom:0px ，但我无法position:fixed; bottom:0px div，当屏幕尺寸发生变化时，它的宽度不会改变...

例如，这正是我想要的（底部的黑色div）：

如果您知道任何jquery插件可以执行我想要的操作，或者您知道如何执行此类操作，请帮助我！

Answer 1

如果您使用的是position: fixed ，则无法应用margin。 您可以指定left和right属性。

position: fixed;
right: 383px;
bottom: 0;
left: 172px;

我知道这并不是你要求的，但你可以在该div上设置white-space和overflow属性，使其显示水平滚动条。

white-space: nowrap;
overflow: auto;

用户将使用底部的滚动条移动div的内容。 这是一个例子： http ： //jsfiddle.net/rustyjeans/5nv84/

要使用jQuery set overflow: hidden并添加一些调整div的scrollLeft的函数，然后添加一些控件来调用这些函数。 这是一个例子： http ： //jsfiddle.net/rustyjeans/FtSGn/

Answer 2

这不应该太难。 您想要一个包含具有查看器尺寸的div。 然后，在那个内部有一个div，其位置绝对和尺寸超出了观察者的宽度。 当箭头悬停在使用jquery上以更改内部div的“left”css属性时。 这有帮助吗？

编辑：外部div应该有“position：relative;” 确保内部div相对于其边缘定位。