"浮动“;父DIV底部的DIV不起作用.(使用Pos:rel、Bottom 0等)

"float" a DIV to bottom of parent DIV not working. (Using Pos: rel, Bottom 0 etc)

本文关键字:DIV rel Pos Bottom 使用 不起作用 浮动 quot 底部      更新时间:2024-06-19

试图让一个div"浮动"到它所在的div的底部。我已经在父div和子div上将位置设置为relative,在子div上将底部设置为0;但它仍然只是位于顶部在中间。

父DIV:

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

儿童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,失去了它的唯一性,这个问题可能已经被删除了。

谢谢-Tom

.obutton位置需要是绝对的。。。让底层按照你想要的方式工作。