[英]CSS3 vertical alignment
我正在創建一個服務器列表,當我回應服務器時,我希望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的底部?
嗯,我認為這可以通過快速使用相對和絕對定位來實現。 將這些樣式添加到#serverInfo
:
#serverInfo {
height:100%;
position:relative;
}
並將#serverListBottom
的樣式替換為:
#serverListBottom {
position:absolute;
bottom:0;
left:0;
right:0;
padding:0 0 3px;
}
您可以更改底部填充以調整IP底部的距離。 (您還可以刪除#serverListBottom
上已棄用的“valign”屬性。)
我希望這就是你要找的東西。 如果沒有,請隨意說出來,我將很樂意為您提供進一步的幫助。
http://codepen.io/anon/pen/nicCa
這是一個codepen。
我做了容器position:relative
和文本position:absolute; bottom:0;
position:absolute; bottom:0;
。
除了文本之外的例行:
<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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.