css - 从底部到顶部放置div

我要创建一个选项卡式窗格，其中的选项卡按以下方式排序：

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

在左下角的is position设置tab1没有问题，但是当换行时，tab6和tab7位于底部，如下所示：

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

有没有办法改变“阅读顺序”？
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;
}

下面是现在的情况：http://jsfiddle.net/qpHNN/336/

最佳答案

嗯，在我看来，可能没有办法重新排列这些元素的顺序，让它们从下到上流动。
但是，可以对transform: rotate(180deg)元素（容器）使用#nav_tabs来伪造效果，并通过.tab来取消每个rotate(-180deg)的旋转效果，如下所示：

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