css - 有没有办法用 CSS 对齐浮动 HTML 元素？

Question

本质上，我试图实现“text-align:justify”的效果，但使用浮动块元素。我有很多块要对齐对齐。

IE。每条线的水平间距不同，以确保每条线的长度相同。（非参差不齐的右边缘）。

有没有办法用 CSS 做到这一点？如果没有，是否有合适的 JS 库来实现这一点？或者这只是不可行的？

score 13 · Accepted Answer

如果项目实际上不是floating，您可以使用position:absolute; left:1em; right:1em让 CSS 根据与某个定位的父项的偏移量为您计算项目的宽度。

如果你只是float因为你有一些块级的项目你试图让流动而使用display:inline-block，请在项目上使用而不是浮动它们。如果父元素有text-align:justify这应该给你你想要的效果（我想是这样）。

这是一个简单的测试，向您展示inline-blockwith的结果text-align:justify。

编辑：我已经更新了简单的测试，以更清楚地表明除了最后一行之外，左右边缘总是对齐的。

score 1 · Accepted Answer

完成前面的回答，如果您想对齐以编程方式创建的 DOM 节点（例如，通过在 javaScript 中使用 document.createElement 和 parentElement.appendChild），对齐的元素之间不会添加空格。这可能导致对齐不工作。

div在我的 Google Chrome 56.0.2924.87 和 Firefox 51.0.1（64 位）浏览器上，如果没有任何空格来分隔元素，则对齐不起作用：

当我通过 javaScript 创建 DOM 节点时，有一个示例：

如果您取消注释 command wrapDiv.appendChild(document.createTextNode(" "));，您可以看到不同之处。可能的解决方案是在 div 节点之后附加一个空白文本节点，如上例所示。

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

2 回答 2