0

我有一个包含一组元素的表。由于可变的img大小，我设置了一个固定的高度，并且由于文本可能溢出text-overflow:ellipsis，但是我无法在可用空间的底部获得图像+文本

图片 http://img713.imageshack.us/img713/7893/immaginescr.png

<div class="game">
     <a href="url"><img src="(img src)"></a>
     <div class="gamedescription">-Metal Gear Solid<br>-PlayStation</div>
</div>

.game {
    width: 110px;
    padding: 5px;
    border: 2px solid #8F8F8F;
    float: left;
    height: 200px;
}

.gamedescription {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

我错过了什么？

4

2 回答 2

0

试试这个 小提琴

例子

<!DOCTYPE html>
<html>
<style>
.game {
position: relative;
width: 110px;
padding: 5px;
border: 2px solid #8F8F8F;
float: left;
height: 200px;
}

.gamedescription {
position: absolute;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
bottom: 0px;
}
</style>
<body>
<div class="game">
     <a href="javascript:void(0);"><img src="http://www.w3schools.com/tags/smiley.gif" alt="Smiley face" width="42" height="42"></a>
     <div class="gamedescription">-Metal Gear Solid<br>-PlayStation</div>
</div>



</body>
</html>

您缺少两者的位置属性

于 2012-12-27T10:30:45.687 回答
0 
<div class="game">
     <div class="Apply bottom properties here">
          <a href="url"><img src="(img src)"></a>
          <div class="gamedescription">-Metal Gear Solid<br>-PlayStation</div>
     </div>
</div>

Css：使用第一篇文章中的那个 +

position: absolute;
bottom: 23px;

在新的 div 上。

于 2012-12-27T10:37:40.137 回答