Geek asks and answers

Css float alternative

In my web application, I have a toolbar, this is a div:

The div has 3 spans. The contents of the three intervals are filled in later.

And the size of the individual intervals varies each 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 the space "ab1" to be placed on the left, "ab2" and "ab3" on the right side on the div.

Is this possible WITHOUT float right / left?

+5
source share
2 answers

Use position:absoluteandtext-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

+6
source

use flexand add orderto spanelements

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

+2
source

More articles:


All Articles