Question

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

此方法将在三个div之间放置相等的空格，而不管其他任何因素。我非常成功地使用了这种技术，并且觉得它远远优于使用浮子。然而，唯一的问题是它似乎不能在IE 11中运行。

我最小化了我的HTML，但在每个div之间放了“＆amp; nbsp”：

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

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

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;”在容器元素上解决这个问题。我强烈建议人们在浮点数时采用这种方法，如果他们想支持IE9。否则切换到flexbox。

在IE

1 个答案: