即使调整窗口大小，如何使用 CSS 确保项目保持在屏幕外？答案

【问题标题】：How to use CSS to ensure items remain offscreen even if window is resized?即使调整窗口大小，如何使用 CSS 确保项目保持在屏幕外？
【发布时间】：2010-05-22 03:47:55
【问题描述】：

我正在尝试使用 jquery 实现一种滑块。然而，这个问题是关于试图实现该功能所涉及的 CSS。

我的网站设计占据了一个宽度为 960 像素的中心列。在这个布局中有一个中心元素，我希望在单击“下一步”按钮时向右滑动，同时，同一类的另一个元素从左侧滑入以占据空出的空间。我已经绘制了我想要实现的目标的图表。alt text http://img714.imageshack.us/img714/692/61886077.png

在此图中，红色块是我要滑入和滑出的元素，它由一个向左移动以使用 jQuery 产生效果的 div 分组

我有两个主要问题：

考虑到浏览器窗口宽度可以变化并且所有非当前项目的元素都应该在屏幕外，我如何获得正确的边距值？

2.如果用户要调整边距，可以根据使用 jQuery resize() 事件返回的值动态更改边距。或者有没有使用纯 CSS 更简洁、更好的方法？

【问题讨论】：

您还可以查看他们用于构建 jQuery coda 滑块的 CSS (jqueryfordesigners.com/coda-slider-effect)。好像和你想要达到的效果差不多。
我看到了，但这是垂直调整，而我的打算是水平移动
Coda 滑块正是您所追求的。您需要的是一个包含窗格的包装器，它隐藏了溢出。再看看 Coda 滑块。

标签： jquery css margin slide

【解决方案1】：

在中间创建一个具有 margin: auto 的 div，以便它始终居中。我猜你的（红色）盒子总是一样的大小？有这个大小的居中 div，并且溢出：隐藏。然后在这个 div 中，创建另外三个 div，它们将在固定的 div 大小而不是浏览器窗口大小内移动。

类似：

<body style="text-align: center">
    <div id="container" style="overflow: hidden; width: 960px; height: 600px; margin: auto; position: relative">
     <div id="slider" style="width: 9999px; position: absolute">
      <div id="first" style="width: 960px; float left;"></div>
      <div id="second" ...></div>
      <div id="third" ...></div>
     </div>
    </div>
</body>

因此，您将容器设置内的滑块 div 向左移动：960px 乘以框数

【讨论】：

在理想情况下，新的 div 将从浏览器窗口的左边缘进入，并从窗口的右边缘退出。即 div 将占据 100% 的窗口，但红色框将是 960px 并居中。
要使用整个窗口，您可以使用浏览器窗口大小将其居中，将红色框放在左侧：($(window).width() / 2) - 960/2。要将其移到窗口外，请将其移至左侧：-960px，同时具有绝对位置。盒子完成动画后，也许您可以更改为 position: relative 和 margin: auto 。这样即使在调整大小时它也会水平居中

【解决方案2】：

在需要它们之前，您不能直接display: none; 红色框吗？

当它们需要移动时，您可以将盒子放在边缘，然后滑动它们：

http://www.jsfiddle.net/Vsjay/

【讨论】：