基本上,我试图通过浮动块元素来实现“text-align:justify”的效果。我有很多块我想证明 - 对齐。
IE中。每条线的水平间距不同,以确保每条线的长度相同。 (非粗糙的右边缘)。
有没有办法用CSS做到这一点?如果没有,是否有合适的JS库来实现这一目标?或者这是不可行的?
答案 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位)上进行了测试。