垂直對齊=底部的圖像+文字

我有一個表包含一組元素。由於變量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; 
}

我失蹤了什麼？

來源

2012-12-27 user1722791

嘗試了這一點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>

你從兩個

來源

2012-12-27 10:30:45

謝謝，但我希望整個圖像+文字進入底部。無論如何，我發現我錯過了一個包含它們的div，這就是爲什麼它不起作用。 – user1722791

對你有好處！ –

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

的一個3210

關於新的div。

來源

2012-12-27 10:37:40 user1722791

垂直對齊=底部的圖像+文字

回答

相關問題