Geek asks and answers

Bottom Divs Positions

I want to create a tabbed panel in which tabs are arranged in this way:

----------------------------------
-tab6 | tab7                     -
-tab1 | tab2 | tab3 | tab4 | tab5-
----------------------------------

Setting tab1in the lower left position is not a problem, but when the line is wrapped, tab6and tab7are at the bottom:

----------------------------------    
-tab1 | tab2 | tab3 | tab4 | tab5-
-tab6 | tab7                     -
----------------------------------

Is there any way to change this "reading order"?

HTML

<div id="header">
    <div id="nav_tabs">
        <div class="tab">test1</div>
        <div class="tab">test2</div>
        <div class="tab">test3</div>
        <div class="tab">test4</div>
        <div class="tab">test5</div>
        <div class="tab">test6</div>
        <div class="tab">test7</div>
    </div>
</div>

CSS

#header {
    width:500px;
    height:300px;
    position:relative;
    border:1px solid red;
}

#nav_tabs {
    position:absolute;
    bottom:0;
    left:0;
}

.tab {
    float:left;
    margin-right:5px;
}

Here's what it looks like now: http://jsfiddle.net/qpHNN/336/

+3
source share
1 answer

Well, IMO, there is probably no way to reorder these elements to plunge them from bottom to top.

However, you can fake the effect using transform: rotate(180deg)for the element #nav_tabs(container) and negate the rotation effect for each .tabon rotate(-180deg)as follows:

#nav_tabs {
    /* other styles... */
    transform: rotate(180deg);
}

.tab {
    /* other styles... */
    transform: rotate(-180deg);
    float: right;  /* in this case you need to float the elements contrariwise */
}

WORKING DEMO .

+2
source

More articles:


All Articles