html - css， float 替代

Question

在我的网络应用程序中，我有一个工具栏，它是一个 div:

div 有 3 个 span。稍后会填充 3 个跨度的内容。

并且每次跨度的大小都不同。

<div>
    <span id="ab1" style="display: inline-block;"></span>
    <span id="ab2" style="display: inline-block;"></span>
    <span id="ab3" style="display: inline-block;"></span>
</div>

现在，我想，跨度“ab1”应该放在左边，“ab2”和“ab3”应该放在右边在 div 的一侧。

这可能没有右/左浮动吗？

Answer 1

使用position:absolute 和text-align:right

CSS

div{background:red; text-align:right; position:relative;}
#ab1{position:absolute; left:0; background:yellow;}
#ab2{background:yellow;}
#ab3{background:yellow;}

DEMO