CSS3垂直对齐

Question

我创建了一个服务器列表，当我回显服务器时，我希望hr标签和IP位于div的底部，我该怎么做？

继承人我的代码：

<div id='serverList'> 
<div id='serverRank'> 
    <b>Rank</b><hr /><span>1</span> 
</div> 
<div id='serverInfo'> 
    <a href='?p=view&s=".$row['id']."'>".htmlentities($row['server_name'])."</a> 
<hr /> 
".htmlentities(substr($row['server_description'],0,250))." 
<div id='serverListBottom' valign='bottom'> 
<hr /> 
<span id='frontInput'>IP: ".$row['server_ip']."</span></div> 
</div> 

我的CSS代码：

#serverList { 
height:auto; 
width:550px; 
-webkit-box-shadow: 7px 7px 20px rgba(50, 50, 50, 0.75); 
-moz-box-shadow: 7px 7px 20px rgba(50, 50, 50, 0.75); 
box-shadow:   7px 7px 20px rgba(50, 50, 50, 0.75); 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
border-radius: 20px; 
margin-left:10%; 
margin-right:auto; 
text-decoration:none; 
text-align:left; 
min-height:100px; 
height:170px; 
margin-bottom:40px; 
padding:0px; 
} 
#serverList a { 
font-size:20px; 
font-weight:bold; 
text-decoration:none; 
color:#222222; 
} 
#serverList a:hover { 
font-size:20px; 
font-weight:bold; 
text-decoration:none; 
color:#444444; 
} 
#serverRank{ 
border:solid 3px #F2F200; 
padding:5px; 
padding-left:10px; 
float:left; 
width:50px; 
text-align:center; 
-moz-border-radius-bottom-right: 20px; 
-webkit-border-bottom-right-radius: 20px; 
border-bottom-right-radius: 20px; 
-moz-border-radius-top-left: 20px; 
-webkit-border-top-left-radius: 20px; 
border-top-left-radius: 20px; 
-webkit-box-shadow: 4px 4px 10px rgba(240, 240, 50, 0.5); 
-moz-box-shadow: 4px 4px 10px rgba(240, 240, 50, 0.5); 
box-shadow:   4px 4px 10px rgba(240, 240, 50, 0.5); 
} 
#serverListBottom { 
margin-bottom:0px; 
} 
#serverInfo { 
float:right; 
width:450px; 
} 
#frontInput { 
color: rgb(0, 0, 0); 
font-size: 14px; 
padding: 2px; 
text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); 
-webkit-border-radius-left: 5px; 
-moz-border-radius-left: 5px; 
border-radius-left: 5px; 
background: rgb(219, 219, 219); 
background: -moz-linear-gradient(90deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%); 
background: -webkit-linear-gradient(90deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%); 
background: -o-linear-gradient(90deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%); 
background: -ms-linear-gradient(90deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%); 
background: linear-gradient(0deg, rgb(219, 219, 219) 30%, rgb(240, 240, 240) 50%); 
-webkit-box-shadow: -1px 1px 1px rgba(50, 50, 50, 0.75); 
-moz-box-shadow: -1px 1px 1px rgba(50, 50, 50, 0.75); 
box-shadow:   -1px 1px 1px rgba(50, 50, 50, 0.75); 
} 
#frontInput:hover { 
cursor:pointer; 
} 

你也许可以在你的头上这是什么样子的样子，但我有什么要在#serverListBottom上做些什么才能使其位于#serverList div的底部？

Answer 1

http://codepen.io/anon/pen/nicCa

这里是一个codepen。

我制作了容器position:relative和文字position:absolute; bottom:0;。

Answer 2

嗯，我认为这可以通过一些快速使用相对和绝对定位来实现。这些样式添加到#serverInfo：

#serverInfo { 
    height:100%; 
    position:relative; 
} 

而更换款式的#serverListBottom本：

#serverListBottom { 
    position:absolute; 
    bottom:0; 
    left:0; 
    right:0; 
    padding:0 0 3px; 
} 

您可以更改底部填充，以调整你如何远离底部需要的IP。 （你也可以去掉#serverListBottom上已弃用的“valign”属性。）

我希望这就是你要找的。如果没有，请随时说出来，我很乐意为您进一步提供帮助。

Answer 3

为例行的预留文本：

<p><span>IP</span></p> 

p { 
     border:inset 1px ; 
     border-left:0; 
     border-right:0; 
     height:0; 
     margin:1.5em 0.5em; 
     text-align:right; 
    } 
    p span { 
     padding:0 20px; 
     vertical-align:20px; 
     line-height:0; 
     background:white; 
    } 

凡<p>可能是：#serverListBottom