in bottom right corner of without “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>

Answer 1

你可以在这里做几件事。您可以使用flexbox并将范围设置为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>

Answer 2

如上所述，如果在position: relative类中使用quote，则使用绝对定位是文件。

使用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;
}

Answer 3

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

绝对定位的一个警告是它可能与其他内容重叠，因此建议将父填充值添加到父div，足以为绝对定位的文本“腾出空间”。

Answer 4

无论容器的高度是多少，矿井都可以工作。

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