定位对象相对于其容器的位置

Question

我正在制作一个服务器列表网站，对于每个服务器，我想显示一个图像和一些信息，当图片被鼠标"悬停"时将显示。

当服务器名称太长时，我希望它滚动以显示悬停时剩余的文本，如果在CSS中指定长度，我该如何做到这一点?

示例:http://jsfiddle.net/5EhSx/2

<div class='server'>
    <div class='server_info'>
        <div align='center' style='margin: 5px; white-space:nowrap; overflow:hidden;'><span class='server_name'>Abc def ghi jkl mno pqr stu vwx yza bcd efg hij klm nop qrs tuv wxy zab cde</span>
        </div>
        <div style='overflow:hidden; padding: 0 5px;'>
            <div style='float:left;'>26 Comments</div>
            <div style='float:right;'>17649 Votes</div>
        </div>
        <div style='overflow:hidden; padding: 0 5px;'>
            <div style='float:left;'>Uptime: 99.7%</div>
            <div style='float:right;'>73/96 Players</div>
        </div>
    </div>
</div>

Css:

.server {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    height: 170px;
    width: 310px;
    border: 1px solid grey;
    position:relative;
    overflow:hidden;
    border-bottom-right-radius:7px;
    border-bottom-left-radius:7px;
    cursor:pointer;
    float:left;
    border-radius: 7px;
}
.server_info {
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom-right-radius:7px;
    border-bottom-left-radius:7px;
    height: 25px;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
}
.server_name {
    position: relative;
    left: 0;
    transition: left 1s;
    -webkit-transition: left 1s;
}
.server:hover .server_info {
    height: 60px;
    transition: height 0.5s;
    -webkit-transition: height 0.5s;
}
.server:hover .server_name {
    left: -165px;
    transition: left 3s;
    -webkit-transition: left 3s;
}

Answer 1

可以指定两个属性:width和left(如果是position:absolute)或margin-left(如果是position:relative)的百分比，如:width:20%; margin-left:15%;