使用 javascript (JQuery Tools Scrollable) 中心更改 CSS 宽度答案

【问题标题】：Change CSS width using javascript (JQuery Tools Scrollable) center使用 javascript (JQuery Tools Scrollable) 中心更改 CSS 宽度
【发布时间】：2010-09-28 21:27:49
【问题描述】：

我正在使用 JQuery Tools Scrollable 来构建一个全页宽度的可滚动表单，这样表单的每一页都会一直滚动到整个页面，取而代之的是从右侧滑入的下一页。

我遇到的问题是如何使每个页面居中，使其在浏览器大小调整和浏览器内缩放 (Ctrl +/-) 中保持居中。我的代码基于：http://flowplayer.org/tools/demos/scrollable/site-navigation.html

我尝试将我的代码封装在这样的 div 中：

<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">

但是，因为这个 div 本身位于页面的中间，所以滚动页面不会一直滑动到左边缘 - 它们在 div 的边缘从左边大约 30% 处被切掉，这看起来很糟糕.

我能想到的唯一结论是动态更改我在 div class="items" 上定义的 margin-left 以确保它始终等于 50% - 440px 但不小于 0。

如何使用 javascript 做到这一点？

【问题讨论】：

标签： javascript ruby-on-rails css jquery-tools

【解决方案1】：

容器div 是绝对定位还是相对定位？如果它有一个特定的宽度，比如说“800px”，那么水平居中很容易，左右两边都有自动边距，例如margin: 0 auto。否则它会变得更狡猾。

如果您想在 Javascript 中响应调整大小，在 jquery 中我会执行 $(window).resize(function() {}) (docs here) 之类的操作，并在处理函数内部更新 CSS 中的一些值。如果您只想增加宽度但仍然有自动边距，您可以选择您的 div 并更新宽度属性，例如$('.mydiv').css('width', '900px');。任何时候调整窗口大小都会触发。

【讨论】：