<Span> в правом нижнем углу <div> без "position:absolute"
Я хочу, чтобы 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>если я использую position:absolute на промежутке, он располагается в правом нижнем углу экрана
Ага. Это потому, что абсолютное позиционирование чего-то относится к его ближайшему позиционированному предку. Другими словами, просто поместите относительное положение в div и вуаля, оно работает (вообще без поплавка, а вместо этого устанавливает нижнее и правое свойства для диапазона).
Ответы 4
Я бы рекомендовал использовать абсолютное позиционирование в этом случае. Неважно, имеет ли родительский div .quote фиксированный размер, единственное требование — установить position: relative на родительском элементе.
Одно предостережение с абсолютным позиционированием заключается в том, что оно может перекрывать другой контент, поэтому рекомендуется добавить значение отступа к родительскому div, достаточно большое, чтобы «освободить место» для абсолютно позиционированного текста.
Есть несколько вещей, которые вы могли бы сделать здесь. Вы можете использовать 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>Как уже упоминалось, использование абсолютного позиционирования является файлом, если вы используете 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;
}
Мой работает независимо от высоты контейнера.
.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 не нужен фиксированный размер для использования position:absolute в диапазоне. Кроме того, у него нет плавающего дна, и он не принимает два значения.