Float:right reverses order of spans

Question

I have the HTML:

    Bookmix Offline
    

        
                      

              相关标签:
       
      

Answer 1

maybe this, for someone...

http://jsfiddle.net/15abbg81/

only horizontal, may be to use: rtl/ltr of tables should work in all browsers that support table-cell css

normal:

<div class="container">
    <section>1</section>
    <article>2</article>
    <aside> <span>א</span><span>.</span> </aside>
</div>
<style>
.container { display: table; 
    direction:ltr; /*ltr here is not required*/
    }
.container>* {
    display: table-cell; /*only works with table-cell*/
    direction:ltr; /*ltr here is not required*/
}
</style>

reverse:

<div class="reverse">
    <div class="container">
        <section>1</section>
        <article>2</article>
        <aside> <span>א</span><span>.</span> </aside>
    </div>
</div>

<style>
    .reverse .container { display: table;  direction:rtl } /*change the outside direction to rtl*/
    .reverse .container>* {
        display: table-cell;
        direction:ltr /*inside switch back to ltr if needed*/
    }
</style>

Answer 2

very easy!

div.outerclass {
    float: right;
}

div.innerclass {
    float: left;
}

Answer 3

Just use display:inline-block and text-align:right instead of float:right:

div { text-align:right }

span { display:inline-block }

Answer 4

It might be achieved using flex margin positioning. Please note that this will work only on IE10+

div
{
    display: flex;  
}

span.label {
    margin: auto;
    margin-left: 0;
}

span.button {    
    margin-right: 5px;
}