html - 在 IE 中使用对齐文本对齐的容器

Question

我有三个宽度固定的 div。我的目标是将这三个 div 水平对齐，每个 div 之间的间距相等。我发现目前最好的解决方案是使用带有“text-align: justify”的容器，如本教程所示:http://www.barrelny.com/blog/text-align-justify-and-rwd/ .

此方法将在三个 div 之间放置相等的空间，而不管任何其他因素。我已经非常成功地使用了这种技术，并且感觉它比使用 float 要好得多。然而，唯一的问题是它似乎无法在 IE 11 及以下版本中运行。

我最小化我的 HTML，但在每个 div 之间放置“ ”:

<div class="block-container">
    <div class="block"></div>&nbsp;
    <div class="block"></div>&nbsp;
    <div class="block"></div>
</div>

“ block 容器”应用了这些样式以使其工作:

max-width: 1100px;
text-align: justify;
&:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

在除 IE 之外的所有浏览器中，这都可以正常工作。我什至可以使用“vertical-align: middle”垂直对齐每个 div。然而，在 IE 中，div 并排放置并且在容器中没有对齐。 IE 是否有任何不同方式解释“text-align: justify”或“nbsp”？

Answer 1

我从 Justify Grid 的文档中找到了答案:http://justifygrid.com/ .诀窍是使用“text-justify: distribute-all-lines;”在容器元素上以在 IE 中修复此问题。如果人们想要支持 IE9，我强烈建议他们采用这种方法而不是 float 。否则切换到 flexbox。