Question

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

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

如果我删除＆＃34; text-align：center;＆＃34;来自#boxcontainer它清除了对齐问题，但是当浏览器窗口缩小时，盒子不会在容器内居中对齐。

如果我删除＆＃34; .box：last-child＆＃34;那么这也解决了对齐问题，但是当浏览器窗口> 960px时，所有四个框都不会内联。

我感谢任何关于我出错的帮助/建议。

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添加到您的box类。

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

Answer 2

最后一个div上的margin-right:0px;导致间距问题。如果我删除它，它似乎没事。 http://jsfiddle.net/ve2fyrh7/2/。

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

2 个答案: