html - 内联 block - 调整浏览器大小时的对齐问题

Question

我有一个最大宽度的包装器，里面有四个固定宽度和高度的盒子。当浏览器窗口缩小时，框内联并在容器内居中，但对齐方式略微偏离，好像左边距很小。

这是一个 jsfiddle:http://jsfiddle.net/ve2fyrh7/

如果我删除“text-align:center;”从 #boxcontainer 开始，它清除了对齐问题，但是当浏览器窗口缩小时，盒子将不会在容器内居中对齐，这是我需要的。

如果我删除“.box:last-child”，那么这也解决了对齐问题，但是当浏览器窗口大于 960 像素时，所有四个框都不会内联。

对于我哪里出错的任何帮助/建议，我表示感谢。

CSS

#wrapper {
    max-width:960px;
    margin:0px auto 0px auto;
}
#boxcontainer {
    width:100%;
    background:#f8f8f8;
    font-size:0;
    text-align:center;
}
.box {
    width:225px;
    height:200px;
    display:inline-block;
    background:#ccc;
    font-size:18px;
    margin:0px 20px 20px 0px;
}
.box:last-child {
        margin-right:0px;
}

HTML

<div id="wrapper">

    <div id="boxcontainer">

        <div class="box">
                <h3>Test</h3>
        </div>

        <div class="box">
                <h3>Test</h3>
        </div>

        <div class="box">
                <h3>Test</h3>
        </div>

        <div class="box">
                <h3>Test</h3>
        </div>

    </div>

</div>

Answer 1

将 float:left 添加到您的框类中。

如果您想在特定媒体设备上解决此问题，请使用媒体查询。