Сообщения DM не выстраиваются
Платформа социальной сети: Я пытаюсь добиться того, чтобы изображение располагалось над отправленным сообщением, как это делается в большинстве стандартных сообщений DM: https://i.stack.imgur.com/vyO2b.png
Но по какой-то причине текст, прикрепленный к изображению, продолжает располагаться рядом с изображением, а не под ним, как показано на скриншоте ниже. Когда я добавляю float: right; в свой CSS, изображение и текст располагаются горизонтально странным образом: Не выстраиваются в ряд
В идеале, изображение должно быть на той же стороне, что и тексты от человека, который отправил изображение, и должно быть чуть выше сообщения, которое было прикреплено к изображению (как это обычно и бывает).
Док HTML, на котором хранятся DMs:
thread.html:
style.css:
> .empty-text {
> color: #777;
> font-size: 1.5rem;
> text-align: center; }
>
> .sent-message {
> background-color: #d7a5eb;
> border-radius: 30px;
> padding: 10px 25px;
> width: 25%;
> float: right; }
>
> .received-message {
> background-color: #cc64c3;
> color: #000;
> border-radius: 30px;
> padding: 10px 25px;
> width: 25%;
>
> }
>
> .message-receiver-container {
> margin-left: auto;
> margin-right: 0; }
>
> .message-sender-container {
> margin-left: 0;
> margin-right: auto;
>
> }
>
>
> .message-image-received {
> border-radius: 10px;
> max-width: 35%;
> height: auto;
>
> }
>
> .message-image-sent {
> border-radius: 10px;
> max-width: 35%;
> height: auto;
> float: right;
> }
>
> .shared-post {
> margin-left: 30px; }