有没有办法证明 - 使用CSS对齐浮动HTML元素?

时间:2010-12-06 22:44:55

标签: css alignment css-float justify

基本上,我试图通过浮动块元素来实现“text-align:justify”的效果。我有很多块我想证明 - 对齐。

IE中。每条线的水平间距不同,以确保每条线的长度相同。 (非粗糙的右边缘)。

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

2 个答案:

答案 0 :(得分:13)

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

如果您只使用float,因为您有一些块级别项目正在尝试创建流程,请对项目使用display:inline-block而不是浮动它们。如果父元素有text-align:justify,这应该会给你想要的效果(我想象)。

以下simple test显示inline-block text-align:justify的结果。

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

答案 1 :(得分:1)

完成上一个答案,如果要对齐以编程方式创建的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位)上进行了测试。