“浮动”一个DIV到父DIV的底部不起作用。 （使用Pos：rel，Bottom 0等）

Question

试图让DIV“浮动”到div的底部。我已经将父级div和kid的位置设置为相对，并且孩子的底部设置为0;但它仍然只位于中间的顶部。

家长DIV：

.detailsContainer
{
    width: 100%;
    height: 30%;
    overflow: hidden;
    position: relative;
    background-color: blue;
}

Kid DIV

.obutton
{
    text-align: center;
    font-weight: bold;  
    width: 80%;
    height: 29px;
    background:rgba(204,204,204,0);
    position:relative;
    bottom: 0;    
    display: inline-block;
    color: #666;
}

目前的实际设置：

                            <div class="detailsContainer">

                                <a href="javascript:unhide(\'BookDetails'.$row->BookID.'\');">
                                <div class="detailview"><b>Book Details<br></a></div>

                                        <div id="BookDetails'.$row->BookID.'" class="hidden">
                                            <table>
                                            <tr><td>Total Stock </td><td>'.$row->TotalStock.'</td>
                                            <td>Current Stock</td><td>'.$row->CurrentStock.'</td></tr>
                                            <tr><td>Awards </td><td>'.$row->Awards.'</td>
                                            <td>Film</td><td>'.$row->Film.'</td></tr>
                                            </table>
                                        </div> 

                        ';?>


                                <br><center><a href = "javascript:void(0)" 
                                onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
                                <div class= "obutton feature2">Reserve Book</div></a></center>                                
                                <div id="light2" class="white_content"></div>
                                <div id="fade" class="black_overlay"></div>                 
                            </div>

要为此发布很多，但是要确保没有任何干扰你们可能发现的东西。它跳出底部附近的php，如果您认为问题可能在其他地方，我会发布整篇文章。

我试图制作它的jsfiddle，但是有太多的php和变量，随着时间的推移它毁了它，它只是2个正常的div，失去了它的唯一性并且问题可能已被删除。< / p>

谢谢 - 汤姆

Answer 1

.obutton的位置必须是绝对的...以便按照你想要的方式工作。