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/

处的工作示例

Answer 2

我玩弄它并想出了类似的东西。

请注意，这有一些限制，因此如果您需要不同的东西，您应该更清楚地定义要求。限制是：

#header必须具有特定或至少受控制的高度，因为#nav_tabs不在流量范围内，因此如果需要，不会调整大小。
解决方案仅限于3个标签，但当然可以更改百分比

所以CSS来了：

   #header
    {
        position:relative;
        height: 200px;
    }
    #nav_tabs
    {
        width:50%;
        position: absolute;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    .tab
    {
        float: left;
        width: 33%;
        text-align: right;
    }

And a Live Demo that you can play with

Answer 3

试试这个css：

#header
{
  position:relative;
}
#nav_tabs
{
  position:relative;
  width:50%; /* remove if you want at bottom right of page */
  height:100%;
}
#tabs
{
  position:absolute;
  bottom:0px;
  right:0px;
}
.tab {
  float:right;
}

用另一个div包装标签：

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

希望有所帮助！

Answer 4

我没有使用嵌套的div，而是使用列表，如下所示：

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

在CSS课程tab中，我添加了值为display的CSS属性inline：

.tab ul
{
 position:absolute;
 bottom:0px;
 float:left;
 display: inline;
}

我希望这适合你。

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

4 个答案:

检查http://jsfiddle.net/qpHNN/2/