如何在底部放置嵌套的div并向右浮动?

Abe*_*ler 3 html css

假设我有一个有三个子div的父div.有没有办法让我可以将所有内容放在右下角?像这样的东西:

--------------------------------------
|                                    |
|                                    |
|                                    |
|                                    |
|                                    |
|                   test1 test2 test3|
|------------------------------------|
Run Code Online (Sandbox Code Playgroud)

我试过这个css:

   #header
    {
        position:relative;
    }
    #nav_tabs
    {
        position:relative;
        width:50%;
        height:100%;
        float:right;
    }
    .tab
    {
        position:absolute;
        bottom:0px;
        float:right;
    }
Run Code Online (Sandbox Code Playgroud)

使用此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>
Run Code Online (Sandbox Code Playgroud)

但它看起来像是将我的标签堆叠在另一个上面.这样做的正确方法是什么?

Hus*_*ein 9

做这个.

#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;
}
Run Code Online (Sandbox Code Playgroud)

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