html - 将文本对齐到大 元素的底部

Question

如何将文本对齐到大 <a> 的右下角div 中的元素？

这是我所拥有的，但我想要框底部的文本。我搜索了很多，但对我没有任何帮助:

<div class="thumbnail">
   <a href="http://link.com">Link to somewhere</a>
</div>​

使用以下 CSS:

.thumbnail{
  width: 200px;
  height: 200px;}

.thumbnail a{
  display: block;
  height: 100%;
  width: 100%;
  text-align: right;
  background-color: lightgrey;}​

http://jsfiddle.net/8JsPV/

谢谢

Answer 1

我更改了您的 HTML 并将整个内容放在 <a> 中标签，所以它都是可点击的。 jsFiddle Here .

HTML:

<a href="#"><div class="thumbnail"><span>Link to somewhere</span></div>​</a>​​​​​​​​

CSS:

 .thumbnail{
  width: 200px;
  height: 200px;
  position: relative;
  background-color: lightgrey;
}

.thumbnail span{
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
}​

编辑:

在不将 div 放入 <a> 的情况下执行此操作, 尝试 this .