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