html - css、float代替

Question

私のWebアプリにはツールバーがあり、それは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の右側に配置する必要があります。

これは右/左にフロートなしの可能性がありますか？

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

デモ

Answer 2

display flexコンテナとmargin-left: auto＃ab2に使用できます。

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

Answer 3

要素を使用flexして追加orderするspan

div {
    display: flex;
    flex-grow: 1;
    justify-content: space-between;   /* space-between / space-around  */
}

/* order the elements as you like ..  */
#ab1 {
    order: 0;
}

#ab2 {
    order: 1;
}

#ab3 {
    order: 2;
}


/* incase text in span is large margin may need */
span {
    margin-left: 10px;
}

---

デモ