Jquery 5000px+；宽水平滚动？

我正在建立这个网站，关于这个页面我有两个问题：

在链接上，你会看到一些不同大小的“将会”图片和图例。 其中一些图像的宽度将达到1700px+，这是第一个问题

检查html和css，您将看到一个id为“gallery”的div，其中包含所有图像。它是绝对定位的，我将其宽度设置为4800px（不足以容纳所有向左浮动的图像。如果您将此宽度更改为5000px，则足以容纳所有图像，一切都将正常，但

问题01： 为什么我需要设置div#gallery width？我会有其他类似的部分，它们具有不同的图像/大小，我无法预览它需要多宽。我只想让它按需要变宽，如果我以后需要添加更多图像，我想让它按需要推宽

问题02： 首先请注意我是如何将“gallery”div的左位置设置为-150px的。 好的，一旦我解决了第一个问题，我可能会将“html”标记设置为{overflow-x:hidden；}，并使用一个与网站一样宽的水平滚动条（+-920px），就在图像的正下方，我希望图像从“hidden right”如{left:0px；}滚动到“hidden left”如{left:-3980px；}的浏览器，反之亦然，当用户使用卷轴时…此卷轴需要计算#gallery div的宽度以及所有内容…有人能给我指出一个jQuery插件来帮助我做到这一点吗？我正在考虑jscrollpane(http://jscrollpane.kelvinluck.com)但我真的不知道这是否行

---

感谢您的帮助！

问题1：您可以使用

pre

或

nowrap

来防止包装。只要html结构和css正确，就不需要设置库宽

问题2：您可以在jQuery中使用scrollLeft属性来查看元素。您不需要插件

然后使用scrollLeft属性为视图中的下一个元素设置动画。此示例不处理边框情况，因此如果单击左/右太多次，它将中断。不过，根据需要修改它应该很容易

css

html

---

谢谢你的时间和如此有用的答案！我刚刚用CSS中的

nowrap；

解决了Q-01问题，我在这里给出了第一个“反馈”。这里有一个测试页面来检查结果：我必须做一些测试，下面是我基本上必须使用的：

#gallery{white space:nowrap；}

div包含所有图形标记

figure{display:inline block；}

它不适用于内联，现在我必须解决jQuery部分。需要一个水平滚动条，因为某些img会非常宽。只需单击btn就不行了，只是为了更好地解释为什么btn不适用于imgs导航，我将使用您自己的。当您到达1000px宽的img时，如果用户有一个小窗口，他将无法访问e要查看图像的右侧，当用户单击右侧的btn时，img运行得太快，以至于他/她仍然无法看到img的详细信息。这就是为什么需要滚动条。用户可以选择以他想要的方式查看img。我甚至可以稍后添加btn，但确实需要滚动条。有什么想法吗？谢谢再次！使用overflow-x属性将图像容器设置为100%？再次感谢！这是“几乎”我需要的。唯一的问题是，这样做，100%的宽度将与我的网站（920px）的相同空间相关。我需要的是一个920px宽的水平滚动条，我需要图像在浏览器窗口的100%宽度上滚动。
如果窗口有1600px，我需要一个920px宽的滚动条，图像在所有1600px上运行；这就是为什么我在考虑一个jquery滚动条插件。这样，那些大屏幕的人就可以看到更大的IMG使用它的显示器分辨率。你觉得怎么样？有什么想法吗？Herman先生，我几乎得到了我需要的…它真的快完成了。我使用jQuery UI Slider，我正在抓取它。我只是不明白为什么它还没有工作…实际上它正在工作，但处理器没有在我拥有的“滑块空间”内“滑动”…我知道o检查css，看看它是否是不可见的/没有样式的，但没有…下面是示例，以便您可以看到它现在是如何的。

body { white-space:nowrap; overflow: hidden; padding: 10px; }
img { margin: 5px; border: 1px solid black; }
img.active { border-color: orange; }
div{ position: fixed; }​

<div><button id="left"><-</button><button id="right">-></button></div><br /><br />
<img class="active" src="http://placehold.it/500x100/" /><img src="http://placehold.it/750x100/" /><img class="active" src="http://placehold.it/300x100/" /><img class="active" src="http://placehold.it/1000x100/" />

$('#left').click(function() {
    var $prev = $('.active').prev();
    $('.active').removeClass('active');
    $prev.addClass('active');   
    $('body').animate( { scrollLeft: $prev.offset().left }, 'slow');
});

$('#right').click(function() {
    var $next = $('.active').next();
    $('.active').removeClass('active');
    $next.addClass('active');   
    $('body').animate( { scrollLeft: $next.offset().left }, 'slow');
});
​