css，浮动替代

Question

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

div 有 3 个跨度。稍后会填充 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 的右侧。

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

原文由 Wolfgang Adamec 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;}

演示

原文由 Sowmya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以将 display flex 用于容器， margin-left: auto 用于#ab2。

 div{
    display: flex;
}
#ab2{
    margin-left: auto;
}

原文由 Asad 发布，翻译遵循 CC BY-SA 4.0 许可协议