如何均匀分配24个分区（3列8行）

Question

所以我有这个问题，均匀地分配24个Div。我有一个容器，应该有3列8行。我在这里遵循了css样式：

Fluid width with equally spaced DIVs

它完美无缺，但底部有一点问题。似乎最后一行并没有完全符合预期：

这是描述问题的图像。

请注意，在底部，div NOT 分布式偶然。我想知道错误是什么，因为所有7行都正常运行（均匀分布）但问题出在最后一排。

这是我的HTLML＆amp; CSS和my Fiddle

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

#container {
    border: 2px dashed #444;
    height: auto;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    width: 1023px;
}

.box {
    width: 327px;
    height: 320px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
#container:after {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

.box {
    background: #ccc
}

Answer 1

您可以将css content: "";属性应用于div#container:after标记。

text-align到#container是Justified，但最后一行（或您的情况下的行）未被拉伸（或压缩）以适应#container和此解决方案使用:after伪内容方法的变体来解决问题。

JSFiddle - DEMO

<强> CSS：

#container:after {
    content: "";
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

有关CSS text-align属性的更多信息，请查看此内容：

  

Mozilla MDN CSS text-align