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

Answer 2

HTMLを変更し、すべてを<a>タグに入れて、すべてクリックできるようにしました。jsFiddleここ。

HTML：

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

CSS：

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

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

編集：

divを中に入れずにそれを行うには、これ<a>を試してください。

Answer 3

これを試して

.thumbnail
    {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: Orange;
        display: block;

    }

    .thumbnail span
    {
        position: absolute;
        right: 0px;
        bottom: 0px;
        display: block;
        text-align: right;
        background-color: Gray;
    }

HTMLをそのように変更します

<a class="thumbnail" href="#"><img
   src="http://www.healthfiend.com/wp-content/uploads/2011/01/Facial-Exercises.jpg"
   alt="face" /><span>Link to somewhere</span></a>

これにより、全体がクリック可能になり、テキストが右下に配置されます。サムネイルの場合、これは実際にはおそらく最終的に必要なものであると想定しているため、divをimgタグに置き換えました。右？