0

我正在使用一个 HTML 网站，该网站的设计固定在一定宽度上，以auto左右边距为中心。我正在开发一个交互式脚本，有时会创建一个大表格作为不适合此宽度的输出，它可能会更宽。

为了显示：

​<html>
<body>
    <div style="margin: 10px auto; width: 300px; border: 1px blue solid;">
    &nbsp;
        <div style="margin: 10px auto; width: 400px; border: 1px red solid;">
        &nbsp;
        </div>
    </div>
</body>
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

( http://jsfiddle.net/ALPXn/ )

我的问题是，我如何将内部的红色 div 对齐在中心，无论它是否突出到蓝色 div 的两侧，而不给它一个明确的负左边距，因为我不知道最终宽度？

4

2 回答 2

3

我认为你可以使用 jquery 来做到这一点。您可以动态更改 css，页面加载后您可以更改 css。代码将与此类似。

var x = $('outerDiv').width();
var y = $('innerDiv').width();
​$('innerDiv')​​​​.css('left',-(y-x)/2)​;​

为此，您必须将 divison id 指定为 outerDiv 和 innerDiv。

于 2012-07-16T19:01:14.150 回答
1

这里的问题是你必须让子元素忽略父元素的宽度和位置才能工作。不过，通过一些 javascript 操作是可能的。通过将 css 位置更改为绝对位置，并将其相对于屏幕居中，它将有效地忽略父级，同时在技术上仍被它包含。

使用 offsetWidth 更新链接：http: //jsfiddle.net/g6dGE/1/

于 2012-07-16T19:12:27.927 回答