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

Posted 2023-03-05

【中文标题】有没有办法用 CSS 对齐浮动 HTML 元素？

【英文标题】：Is there a way to justify-align floating HTML elements with CSS?

【发布时间】：2011-05-21 06:41:48

【问题描述】：

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

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

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

【问题讨论】：

如果您发布到目前为止所做工作的样本或您正在努力实现的目标的模型，将会有所帮助。

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

如果你在块上定义 display:inline-block 而不是浮动它们，我会工作。

【参考方案1】：

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

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

这是一个simple test，显示inline-block 和text-align:justify 的结果。

编辑：我更新了简单测试，以更清楚地显示除了最后一行之外，左右边缘始终对齐。

【讨论】：

这是预期的效果，但它在 IE7 中不起作用。我已经为 IE7 (jsfiddle.net/mfmfR/3) 修改了它，我认为这可能是我正在寻找的答案。我必须仔细检查这是否真的适用于我现有的代码。谢谢指点！

这行得通，但有一点问题：最后一行不对齐，有没有解决方案，比如完全对齐？

@BotondVajna 您可以通过添加#wrap:after content:""; display:inline-block; width:100% 来创建完整的理由。这是a demo。

【参考方案2】：

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

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

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 位）上测试。