Question

我过去几天成功使用了here (link to article)所述的方法。

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

An：在psuedo元素之后确保总是＆＃34; text＆＃34;被迫进入下一行以确保其合理性。

但是在this particular instance (link to 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通过拉伸单词之间的空格来工作，由空格字符分隔。因此，为了使内联块之间的间隙伸展，它们之间必须有空格字符。在您的示例中，块之间没有空格。

添加空格，块将合理。

text-align：justify not working

1 个答案: