html - 如何将嵌套的 div 放置在底部并向右浮动？

Question

假设我有一个包含三个子 div 的父 div。有没有办法可以将所有内容都放在右下角？像这样:

--------------------------------------
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                   test1 test2 test3|
|------------------------------------|

我试过这个 css:

   #header
    {
        position:relative;
    }
    #nav_tabs
    {
        position:relative;
        width:50%;
        height:100%;
        float:right;
    }
    .tab
    {
        position:absolute;
        bottom:0px;
        float:right;
    }

使用这个 HTML:

<div id="header">
<div id="nav_tabs">
    <div class="tab">test1</div>
    <div class="tab">test2</div>
    <div class="tab">test3</div>
</div>
</div>

但它看起来像是将我的选项卡一个接一个地堆叠起来。执行此操作的正确方法是什么？

Answer 1

这样做。

#header
{
    width:500px;
    height:300px;
    position:relative;
    border:1px solid red;
}
#nav_tabs
{
    position:absolute;
    bottom:0;
    right:0;
}
.tab
{
    float:left;
    margin-right:5px;
}

在 http://jsfiddle.net/qpHNN/2/ 查看工作示例