在IE中使用對齊文本對齊的容器

我有三個固定寬度的div。我的目標是將這三個div水平對齊，每個div之間的間距相等。我發現迄今爲止最好的解決方案是在本教程中使用帶有「text-align：justify」的容器：http://www.barrelny.com/blog/text-align-justify-and-rwd/。在IE中使用對齊文本對齊的容器

此方法將在三個div之間放置相等的空間，而不管其他因素如何。我已經非常成功地使用了這種技術，並且感覺它遠勝於使用浮動。但唯一的問題是，它似乎並沒有在IE 11中運行並停止運行。

我儘量減少我的HTML，而是把「& 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」？

來源

2015-10-10 Mouse6541

我想出了對齊網格文檔的答案：http://justifygrid.com/。訣竅是使用「text-justify：distribute-all-lines;」在容器元素來解決這個在IE中。如果他們想要支持IE9，我強烈建議人們採用這種方法。否則，切換到flexbox。

來源

2015-10-10 06:38:29 Mouse6541

在IE中使用對齊文本對齊的容器

回答

相關問題