0

我正在尝试在容器 div 的中心对齐多个 div。我正在使用模数函数来计算页面左侧所需的填充。这是我正在使用的 JavaScript：

JavaScript

window.addEventListener("resize", winResize, false);
var width, leftPad, space, boxWidth;

winResize();

function winResize() {
    width = document.getElementById('body').offsetWidth;
    boxWidth = 350 + 10 + 10;
    space = width % boxWidth;
    document.getElementById('a').innerHTML = width + '....' + space;
    leftPad = space / 2;
    document.getElementById('container').style.paddingLeft = leftPad + 'px';
    document.getElementById('container').style.width -= leftPad;

};

HTML如下：

<div id="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

和CSS：

#container {
    width: 100%;
    float: left;
}
#container .block {
    width: 350px;
    height: 350px;
    background-color: 4e4e4e;
    float: left;
    margin: 10px;
}

我的问题是这段代码，左边的填充将容器 div 推到右边，这使得页面比窗口宽。我尝试从容器的宽度中删除填充（在 winResize 函数的底线），但这似乎没有任何作用。有没有办法可以用 CSS 填充/边距删除这个“多余的 div”？

4

2 回答 2

1

我能感觉到的是，您正在尝试使容器看起来在页面的中心，不需要 js 来做到这一点，并且不喜欢使用 js 来定位页面中的静态元素。

这是您应该使用的 css 使其位于中心和流体

 #container {
    width: 100%;
    text-align:center;
 }

 #container .block {
    width: 350px;
    height: 350px;    
    background-color: #4e4e4e;
    display:inline-block;
    margin: 10px;
 }

你也可以看到这个小提琴：http: //jsfiddle.net/ghFRv/

于 2013-10-16T21:09:25.737 回答
0

我想知道您是否有任何理由要居中 html 元素？

这是一项 CSS 工作，CSS 在这方面做得非常好。

如果你想让你的 DIVS 居中，你可以margin: 0 auto;在 .block 上使用。这将使您的布局居中并保持元素块级别。

你的 CSS 看起来像这样：

#container {
    width: 100%; /*Remove the float, it's not needed. Elements align top-left standard.*/
}

#container div.block {
    width: 350px; /*Makes it possible for margin to center the box*/
    height: 350px; 
    background: #4e4e4e; /*background is the shorthand version*/
    margin: 10px auto; /*10px to keep your margin, auto to center it.*/
}

这应该可以解决您的问题，并使您的页面加载速度更快，因为没有 JS 加号，由于 JS 被禁用，布局永远不会被“禁用”。

希望这会有所帮助，如果确实如此，请不要忘记投票/接受答案

- 席德

于 2013-10-16T21:15:08.423 回答