将段落垂直对齐到 div 的底部不起作用

Jak*_*ter 2 html css

我有以下问题:

我有一个 div,在这个 div 中我有一个段落(p 标签),其中包含 5 张图像。我希望整个段落都位于 div 容器的底部,但我没能完成,我已经尝试过使段落显示内联框或表格单元格,并将其垂直对齐到底部,但没有作品。

也许有人可以帮助我?

代码:

Div 容器:

#info {
    float:left;
    text-align:center;
    width:770px;
    height:600px;
    background:#fcfcfc;
    border:thin solid;
    border-color:#CCC;
    -moz-border-radius: 5px;    
    -webkit-border-radius: 5px; 
    -o-border-radius: 5px;
    font-family: "Myriad Pro";
    font-size: 12px;
}
Run Code Online (Sandbox Code Playgroud)

应该在div底部的段落

 <p style="display:inline-block; vertical-align:bottom;">
        <!-- Twitch Chat - Insert Twitch Id -->
        <a href="http://de.twitch.tv/chat/embed?channel=guardsmanbob&amp;popout_chat=true"><img id="ov" src="../Images/List/diverse/button_twitchchat.png"  /></a> 
        <!-- IRC Chat - Insert Quakenet id -->
        <a href="http://webchat.quakenet.org/?channels=guardsmanbob"><img id="ov" src="../Images/List/diverse/button_ircchat.png"  /></a>
        <!-- Facebook - Insert Facebook URL --> 
        <a href="https://www.facebook.com/pages/Guardsman-Bob/316802258368275"><img id="ov" src="../Images/List/diverse/button_facebook.png" /></a>
        <!-- Twitter - Insert Twitter URL --> 
        <a href="https://twitter.com/GuardsmanBob"><img id="ov" src="../Images/List/diverse/button_twitter.png"  /></a> 
        <!-- Leaguepedia - Insert Leaguepedia URL -->
        <a href="http://leaguepedia.com/wiki/GuardsmanBob"><img id="ov" src="../Images/List/diverse/button_leaguepedia.png"  /></a>
        </p>
Run Code Online (Sandbox Code Playgroud)

Pet*_*ete 5

正如你知道你的 p 标签的高度一样,你可以使用这样的东西:

为段落的父容器添加以下样式:

.parent {position:relative; padding-bottom:20px; /*height of your images plus any padding for your paragraph*/}
Run Code Online (Sandbox Code Playgroud)

那么你可以绝对定位你的图像:

 p {position:absolute; bottom:0; left:0;}
Run Code Online (Sandbox Code Playgroud)