Question

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

这是我所拥有的，但我希望文本位于框的底部。我搜索了很多，没有任何对我有用：

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

Updated fiddle

Answer 2

我更改了您的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;
}

编辑：

要做到这一点，不要在<a>内放置div，请尝试this。

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，因为我假设缩略图这实际上是你最终想要的。正确？

将文本与大<a> element</a>的底部对齐

3 个答案: