Question

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

image 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;
}

我缺少什么？

Answer 1

试试Fiddle

实施例

<!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>

你缺少两个位置属性

Answer 2

<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。

垂直对齐=图像+文本底部

2 个答案: