试图定位一个元素总是在我的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标签上指定一个高度超过该高度的文字（您也可以将其删除）。