javascript - 使用 JavaScript 将多个 div 居中放置在流畅的布局中

Question

我试图在容器 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”？

Answer 1

我能感觉到的是，您正在尝试让容器看起来位于页面的中心，不需要 js 来执行此操作，并且不喜欢使用 js 在您的页面中定位静态元素。

这是您应该使用的 css 使其居中且流畅

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

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

您还可以看到这个 fiddle :http://jsfiddle.net/ghFRv/