Html css，浮动替代

css, float alternative

提问by Wolfgang Adamec

In my web app I have a toolbar, it's a div:

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

The div has 3 spans. The contents of the 3 spans get filled later.

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

And the size of the individual spans differ every time.

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

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

Now, I want, that span "ab1" should be placed on the left, "ab2" and "ab3" on the right side on the div.

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

Is this possibe WITHOUT float right/left?

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

回答by Sowmya

Use position:absoluteand text-align:right

使用position:absolute和text-align:right

CSS

CSS

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

DEMO

演示

回答by bhv

use flexand add orderon spanelements

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

---

---

demo

演示

回答by asadollah

You can use display flexfor container and margin-left: autofor #ab2.

您可以使用display flex容器和margin-left: auto#ab2。

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