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，这应该会有所帮助：

.thumbnail{
  position: absolute;
  bottom: 0;
  right: 0;
}

a{
  display: block;
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightgrey;
}​

HTML：

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

更新的小提琴

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>

这使得整个内容可点击并将文本与右下角对齐。我用 img 标签替换了你的 div，因为我假设缩略图实际上是你最终可能想要的。对？