css如何在另一个div的底部创建这个div

Question

这是一个jfiddle

http://jsfiddle.net/79prY/

这是结果：

我希望带圆圈的div位于紫色div的底部。

带圆圈的div就是这个div

<div class="slNewClass">
                     <div class="details">
                         <span class="content">Service Level</span>
                         <span class="value" id="slSpan" runat="server">0%</span>
                     </div>
                 </div>

我试图这样做

position:relative;
    bottom:0px;

但没有改变，请你帮忙

（请为什么我的解决方案不起作用？）

Answer 1

的 DEMO

执行以下操作：

• 将.slNewClass div设置为position: absolute;＆amp; bottom: 0px;
• 为避免内容重叠绝对定位div，请将.mainTable div box-sizing:添加到border-box，然后添加添加填充底部，如padding-bottom: 130px;

注意：底部填充应与底部div高度相同+呼吸空间的一些额外像素。

Answer 2

您可以在其容器上使用position: absolute; bottom: 0px;和position: relative;。

的 Demo

.bottom {
    position: absolute;
    bottom: 0px;
}

然而绝对定位的div不会扩展其容器的高度，如果高度太小，将与其他内容重叠。

使用相对定位将x [单位]从其原始位置移开。设置

position: relative;
bottom: 0;

将从底部向上移动0 [unit]。

Answer 3

DEMO HERE

你只需要添加2条规则。

.slNewClass {
    position: absolute;
    bottom:0 ; 
}

.mainTable {
    position: relative;
}

Answer 4

试试这个：

首先更改表的样式：

.informationTableClass {
  height: 100%; /* 60% to 100%*/
  width: 100%;
}

然后在表格中移动div并将其更改为：

<tr><td colspan="2" style="height:100%"></td></tr>
<tr>
  <td colspan="2">
    <div class="slNewClass">
      <div class="details">
        <span class="content">Service Level</span>
        <span class="value" id="slSpan" runat="server">0%</span>
      </div>
    </div>
  </td>
</tr>

http://jsfiddle.net/XaE75/