Question

我想创建一个标签式窗格，其中的标签以这种方式排序：

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

在左下方设置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/

Answer 1

好吧，IMO可能无法重新排序这些元素，使它们从 bottom 流向 top 。

但是，您可以使用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

定位div从底部到顶部

1 个答案: