text-align：justify不起作用

Question

在过去的几天中，我已经成功地使用了此处描述的方法（链接到文章） 。

它显示了如何通过将text-align：justify应用于父容器来避免为网格中的块计算基于百分比的边距。

：after psuedo元素可确保始终在下一行强制插入“文本”以确保其合理性。

但是在这种特定情况下（链接到jsFiddle），这些块没有响应text-align：justify。 下面的代码在其他地方运行良好，所以我缺少一些东西。

的HTML

<div class="container"><div class="contents"></div><div class="contents"></div><div class="contents"></div><div class="contents"></div><div class="contents"></div></div>

的CSS

.container {
     font-size: 0.1px;
     text-align:justify;
}

.container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

.contents {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

Answer 1

text-align:justify通过扩展单词之间的空格（由空格字符分隔）来工作。 因此，为了扩大内联块之间的间隙，它们之间必须有空格字符。 在您的示例情况下，块之间没有空格。

添加空格，这些块将对齐。