試圖定位一個元素總是在我的div底部

Question

我試圖在我的div底部對齊我的<span class="fechar_fancy">Back/span>，不依賴於我的內容的高度我總是希望這個元素在底部。

因此，我試圖給position:absolute和bottom:0我的元素，我想位於底部，並相對於容器的位置，但它不工作。

有人在那裏看到爲什麼它不工作？

這是我擺弄着我的努力： http://jsfiddle.net/KHU7h/1/

我的HTML：

<div id="janela_fancybox-container"> 
    <div id="janela_fancybox"> 
    <h2>Title</h2> 
    <span id="data">Date time today</span> <br /> 
    <img class="img_principal" src="../image1.jpg"/> 
    <p> 
    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text     Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text     Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text     Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
    </p> 
    <span class="fechar_fancy"><strong>Back</strong></span> 
    </div> 
</div> 

我的CSS：

#janela_fancybox 
{ 
    text-align:center; 
    width:100%; 
    margin:0 auto 0 auto; 
    background:#fff; 
    position:relative; 


} 

#janela_fancybox .img_principal 
{ 
    width:180px; 
    height:200px; 
    float:left; 
    margin-right:10px; 
    border:5px solid #f3f3f3; 
    margin-top:15px; 
} 



#janela_fancybox #data 
{ 
    width:100%; 
    color:#ccc; 
    font-size:13px; 
    text-align:center; 
    color:#7a7a7a; 
} 


#janela_fancybox h2 
{ 
    width:100%; 
    color:#004B97; 
    font-size:16px; 
    text-align:center; 
} 

#janela_fancybox p 
{ 
    font-size: 14px; 
    text-align:justify; 
    line-height:25px; 
    height:25px;  
    word-spacing:-2px; 
    width:96%; 
    margin-top:15px; 
} 

#janela_fancybox .fechar_fancy 
{ 
    float:left; 
    text-decoration:none; 
    font-size:15px; 
    color:#000; 
    width:100%; 
    text-align:center; 
    cursor:pointer; 
    position:absolute; 
    bottom:0; 
} 

Answer 1

我看到的主要問題是#janela_fancybox p有height:25px。這使#janela_fancybox的高度不隨文本內容的擴展而變大。我刪除了高度：

#janela_fancybox p { 
    ... 
    /*height:25px;*/ 
} 

此外，絕對定位的元素可以使用left:0，以確保它開始在左邊和擴展到100％的寬度。該float是沒有必要的：

#janela_fancybox .fechar_fancy { 
    /*float:left; */ 
    ... 
    left:0; 
} 

而且，絕對定位的元素趨於重疊的文本內容。我加了一些填充到容器的底部，以確保有空間底部的「返回」鏈接：

#janela_fancybox { 
    ... 
    padding-bottom:25px;  
} 

WORKING EXAMPLE (jsfiddle)

---

附：在這方面，我不認爲有必要絕對確定這一要素。文字後可以是position:relative。當然，你的應用程序可能比這裏介紹的更多。

Here's a demonstration.

Answer 2

這裏的問題是DIV＃的fancybox不清除其中的浮動元素。你可以做clearfix類，並將其添加到div＃fancybox。您也可以在p標籤上指定一個高度超過該高度的文字（您也可以將其刪除）。