<div>右下角的<Span>，但不使用"position:absolute"。

Question

我希望有一个看起来像这样的 div：

+--------------------------------+
|                                |
|     "This is a quote..."       |
|                                |
|                         Author |   
+--------------------------------+

我无法将作者的名称定位在右下角。 我想知道如何在不使用position:absolute且我的div没有固定大小的情况下完成它。

.quote {
  margin: 20px;
  background-color: blue;
  padding: 20px;
  border-radius: 15px;
  text-align: justify;
  color: white;
}

.author {
  color: red;
  float: right bottom; /* does not work ... it works if I remove 'bottom' but I don't like it because I want a vertical space between the quote and the author*/
}

<div class="quote">
  Lorem ipsum dolor sit amet
  <span class="author">loremipsum.io</span>
</div>

- Mike Delta

---

你的div不需要固定大小就可以在span上使用position:absolute。此外，没有float bottom，也没有float接受两个值。 - j08691

如果我在span上使用position:absolute，它会定位在屏幕的右下角。 - Mike Delta

没错。那是因为绝对定位取决于其最近的已定位祖先元素。换句话说，只需在 div 上设置相对定位，就可以正常工作（完全不需要浮动，并将右侧和底部属性设置在 span 上）。 - j08691

Answer 1

在这里你可以做几件事情。你可以使用flexbox并将span设置为align-self: flex-end，像这样：

.quote{
  border:1px solid #000;
  padding:5px;
  display:flex;
  flex-direction:column;
}

.quote span{
  align-self: flex-end;
}

<div class="quote">
  Lorem ipsum dolor sit amet
  <span class="author">loremipsum.io</span>
</div>

或者您可以将文本右对齐到，并将该设置为display:block，如下所示：

.quote{
  border:1px solid #000;
  padding:5px;
}

.quote span{
  display:block;
  text-align:right;
}

<div class="quote">
  Lorem ipsum dolor sit amet
  <span class="author">loremipsum.io</span>
</div>

- Steve K

Answer 2

如前所述，在quote类中使用position: relative，则使用绝对定位是可行的。

另一种方法可以通过CSS Grid实现，如下所示：

<div class="quote">
  <span>Lorem ipsum dolor sit amet</span>
  <span class="author">loremipsum.io</span>
</div>

.quote {
  display: grid;
  margin: 20px;
  background-color: blue;
  padding: 20px;
  border-radius: 15px;
  color: white;
}

.quote .author {
  justify-self: right;
}

- Carl Reid

Answer 3

我的代码可以适用于任何高度的容器。

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 500px;
  border: 1px solid #000;
  padding: 20px;
}

.quote p {
  max-width: 80%;
}

.quote span {
  align-self: flex-end;
}

<div class="quote">
  <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
  <span class="author">loremipsum.io</span>
</div>

- StefanBob

Answer 4

我建议在这种情况下使用绝对定位。父级div .quote 是否具有固定大小并不重要，唯一的要求是在父级上设置position: relative。

绝对定位的一个注意点是它可能会重叠其他内容，因此建议为父级div添加足够大的填充值以“腾出空间”来容纳绝对定位的文本。

- Mike Retzak