有没有一种方法可以使用CSS对浮动的HTML元素进行两端对齐？

Question

本质上，我想用浮动块元素实现“text-align: justify”的效果。我有许多块需要进行对齐。

即每行的水平间距不同，以确保每行长度相同。（非松散右边缘）。

是否有一种使用CSS的方法来实现这一点?如果没有，是否有适合的JS库可以实现这一点？还是说这是不可行的？

- rocketmonkeys

---

如果您能发布一些您已经完成的样本或者您想要实现的模型，那将会很有帮助。 - Phrogz

那些块是什么？图片吗？另外，它们的高度是否相等？ - Šime Vidas

如果您在块上定义display:inline-block而不是浮动它们，我会起作用。 - Šime Vidas

Answer 1

如果这些项目实际上并没有浮动，您可以使用 position:absolute; left:1em; right:1em ，让 CSS 基于某些定位父元素的偏移计算项目的宽度。

如果您仅使用 float 是因为您想让一些块级项目流动，请在这些项目上使用 display:inline-block 而不是将其浮动。如果父元素具有 text-align:justify，那么这应该会给您想要的效果。

这里有一个 simple test 演示了带有 text-align:justify 的inline-block 的结果。 编辑：我已更新简单测试，以更清楚地显示左右边缘始终对齐，除了最后一行。

- Phrogz

---

那是预期效果，但在IE7中不起作用。我已经修改了IE7的版本（http://jsfiddle.net/mfmfR/3/），我认为这可能就是我要找的答案。我将不得不仔细检查这是否适用于我的现有代码。谢谢你的指引！ - rocketmonkeys

这个程序是可以工作的，但是有一个小问题：最后一行没有对齐，是否有解决方案，比如说完全对齐？ - Botond Vajna

您可以通过添加 #wrap:after {content:""; display:inline-block; width:100%} 来创建文本两端对齐的效果。这里有一个演示链接：演示。 - Phrogz

Answer 2

完成上一个答案，如果你想对通过编程方式创建的DOM节点（例如，使用JavaScript中的document.createElement和parentElement.appendChild）进行对齐，则不会在对齐元素之间添加空格。这可能会导致对齐失败。

在我的Google Chrome 56.0.2924.87和Firefox 51.0.1（64位）浏览器上，如果没有任何空格来分隔

元素，则对齐将无法正常工作：

https://jsfiddle.net/jc5qwyaw/

当我使用JavaScript创建DOM节点时，有一个示例：

https://jsfiddle.net/oa8yeudr/

如果您取消注释命令wrapDiv.appendChild(document.createTextNode(" "));，则可以看到差异。可能的解决方案是在div节点后附加一个空格文本节点，如上例所示。

仅在Chrome 56.0.2924.87和Firefox 51.0.1（64位）上进行了测试。

- Kristóf Kőhalmy