链接内底部对齐的内容[重复]答案

【问题标题】：bottom aligned content inside link [duplicate]链接内底部对齐的内容[重复]
【发布时间】：2018-08-04 19:28:43
【问题描述】：

我有一个简单的 HTML 链接

<a href="#">this is a link</a>

这是CSS

a {
    height: 500px;
    outline: 1px #000 dotted;
}

我无法将内容推送到链接底部。不会那么难吧？

这就是它的样子

...................
. this is a link  .
.                 .
.                 .
.                 .
...................

这就是我需要的

...................
.                 .
.                 .
.                 .
. this is a link  .
...................

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

a {
    height: 100px;
    outline: 1px #000 dotted;
    display: inline-flex;
    justify-content: flex-end;
    flex-direction: column;
}

&lt;a href="#"&gt;This is link&lt;/a&gt;

【讨论】：

【解决方案2】：

这应该可以解决问题

a {
height: 500px;
position: relative;
outline: 1px #000 dotted;
display: block;
}
a span {
  position: absolute;
  bottom: 0;
}

像这样添加一个跨度

<a href="#"><span>this is a link</span></a>

【讨论】：

【解决方案3】：

你可以使用：

a {
  position: relative;
  outline: 1px dotted #000;
  top: 20px;
}

【讨论】：