如何在底部定位嵌套的div和浮动右？ [英] how can I position nested divs at the bottom and float right?

问题描述

说我有一个父div，有三个子div。有没有办法，我可以把一切放在右下角？像这样：

Say I have a parent div with three child divs. Is there a way that I can position everything in the bottom right corner? Something like this:

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

但它看起来像是将我的选项卡堆叠在另一个之上。这是正确的方法是什么？

But it looks like it is stacking my tabs one on top of the other. What is the correct way to do this?

推荐答案

#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;
}

这篇关于如何在底部定位嵌套的div和浮动右？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！