代码之家 › 专栏 › 技术社区 › Mazatec

如何使用CSS来确保即使窗口调整了大小,项目也保持在屏幕外?

slide margin css jquery

Mazatec · 技术社区 · 16 年前

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

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

我有两个主要问题:

2.如果用户要调整页边距大小,则可以根据使用jQuery resize()事件返回的值动态更改页边距。或者有没有一种更简洁、更快、更好的方法来使用纯CSS呢?

2 回复 | 直到 16 年前

baloo 16 年前

在中间创建一个div,它有margin:auto,这样它就会一直居中。我猜你的(红色)盒子总是一样大?将这个居中的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>