从底部向上定位div元素

Question

从底部向上定位div元素

3

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

----------------------------------
-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/

- Rooboo

2

你能添加你的代码吗？ - Wahtever

可能需要一段脚本。 - kdani

已添加 jsfiddle，抱歉。 - Rooboo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hashem Qolami · Accepted Answer

我认为，可能没有办法重新排列这些元素，使它们从底部流向顶部。

但是，您可以通过对容器#nav_tabs应用transform: rotate(180deg)，并对每个.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 */
}

工作演示。