Html 如何平均分配24个div（3列8行）

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

它工作得很好，但底部有一个小问题。最后一行似乎没有发挥应有的作用：

这里有一张图片来描述这个问题

请注意，在底部，div的分布并不均匀。我想知道是什么问题，因为所有的7行功能都正确地分布均匀，但问题在于最后一行

这是我的HTLML&CSS和

---

您可以通过应用css内容来做到这一点：；属性添加到divcontainer:after标记

文本align to container是，但您案例中的最后一行或最后一行不会拉伸或压缩以适合容器，此解决方案使用：after伪内容方法的变体来解决此问题

JSFiddle- CSS:

有关CSS文本对齐属性的更多信息，请查看此链接：

<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
}

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