Question

我试图在我的div底部对齐我的<span class="fechar_fancy">Back/span>，取决于我的内容的高度，我希望这个元素始终位于底部。

所以我试图将position:absolute和bottom:0提供给我想要位于底部的元素，并相对于容器定位，但它不起作用。

有人在那里看到为什么它不起作用？

我的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;
}

并且，绝对定位的元素倾向于与文本内容重叠。我在容器的底部添加了一些填充物，以确保底部有空间用于＆＃34;背面＆＃34;链接：

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

WORKING EXAMPLE (jsfiddle)

P.S。在这种情况下，我不认为有必要绝对定位该元素。在文本之后它可能只是position:relative。当然，您的应用程序可能比此处提供的更多。

Here's a demonstration.

Answer 2

这里的问题是div #fancybox没有清除其中的浮动元素。您可以执行clearfix类并将其添加到div＃fancybox。您还在p标签上指定了一个高度，其中的文本超出了该高度（您可能也希望将其删除）。

试图将一个元素定位在我的div的底部

2 个答案: