我有以下问题:
我有一个 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&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)
正如你知道你的 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)