CSS3 垂直对齐答案

【问题标题】：CSS3 vertical alignmentCSS3 垂直对齐
【发布时间】：2013-07-03 17:18:09
【问题描述】：

我正在创建一个服务器列表，当我回显服务器时，我希望 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 的底部？

【问题讨论】：

你不能先position:absolute;然后bottom:0;吗？
不要使用 hr，而是使用从中画线的容器。
检查答案，但简短的答案是position:relative 到您的#serverlist 和position:absolute;bottom:0; 到#frominput。

标签： html css alignment valign

【解决方案1】：

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

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

并将#serverListBottom 的样式替换为：

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

您可以更改底部填充以调整您希望 IP 与底部的距离。（您也可以去掉 #serverListBottom 上已弃用的“valign”属性。）

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

【讨论】：

【解决方案2】：

文本旁边的一行示例：

 <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

【讨论】：

【解决方案3】：

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

这是一个代码笔。

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

【讨论】：