в правом нижнем углу без "position:absolute"

#html #css

#HTML #css

Вопрос:

Я хочу, чтобы 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>

1. Вашему div не нужен фиксированный размер для использования position:absolute в диапазоне. Кроме того, нет плавающего дна, и float не принимает два значения.

2. если я использую position:absolute для диапазона, он позиционируется в правом нижнем углу экрана

3. Да. Это потому, что позиционирование чего-либо абсолютно относительно его ближайшего позиционированного предка. Другими словами, просто поместите относительную позицию в div и вуаля, это работает (вообще без float, и вместо этого установите свойства bottom и right для span).

Ответ №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>

Ответ №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;
}

Ответ №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>

Ответ №4:

В этом случае я бы рекомендовал использовать абсолютное позиционирование. Не имеет значения, имеет ли родительский div .quote фиксированный размер, единственным требованием является то, что вы устанавливаете position: relative на родительском.

Одно предостережение при абсолютном позиционировании заключается в том, что оно может перекрывать другое содержимое, поэтому рекомендуется добавить значение заполнения к родительскому элементу, div достаточно большое, чтобы «освободить место» для абсолютно позиционированного текста.