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

如上所述，如果在get pettest类中使用{"@class":"com.cisco.rediscluster.Pet","name":"tommy","height":10}，则使用绝对定位是文件。

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

position: relative

quote

Answer 3

在这种情况下，我建议使用绝对定位。父div .quote是否具有固定大小并不重要，唯一的要求是您在父div上设置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>

<div>右下角的<span>，不带“ position：absolute”

4 个答案: