webproger
Newbie | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Сделайте лучше обертку для каждого сообщения, потому что 2 вариант может криво работать в старых браузерах.
Пример реализации
Код:
<div class="outbox-wrap">
<img class="outbox-ava" src="https://via.placeholder.com/150" alt="">
<p class="outbox">Some text</p>
</div>
<div class="inbox-wrap">
<img class="inbox-ava" src="https://via.placeholder.com/150" alt="">
<p class="inbox">Some text <span style="font:12px AppleColorEmoji; ">😎</span></p>
</div>
|
И стили
Код:
.outbox-wrap,
.inbox-wrap{
position: relative;
overflow: hidden;
}
.outbox-wrap{
padding-right: 40px;
align-self: flex-end;
}
.inbox-wrap{
padding-left: 40px;
align-self: flex-start;
}
.outbox-ava,
.inbox-ava{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
bottom: 15px;
z-index: 2;
}
.outbox-ava{
right: 0;
}
.inbox-ava{
left: 0;
}
|
|
