css - 有没有办法用 CSS 对齐 float 的 HTML 元素？

Question

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

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

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

Answer 1

如果元素实际上不是 float ，您可以使用position:absolute;左:1em； right:1em 让 CSS 根据相对于某个已定位父级的偏移量为您计算元素的宽度。

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

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

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