Быстрый вопрос: Изменение CSS для DM на сайте социальной сети

Я пытаюсь сделать так, чтобы изображение располагалось над отправленным сообщением, как это делается в большинстве стандартных сообщений DM: https://prnt.sc/IR__3qyiXqlI (то, как я хочу, чтобы это выглядело)

Но по какой-то причине текст, прикрепленный к изображению, продолжает располагаться рядом с изображением, а не под ним, как показано на скриншоте ниже. Когда я добавляю float: right; в свой CSS, изображение и текст располагаются горизонтально странным образом: как это выглядит в настоящее время

В идеале, изображение должно быть на той же стороне, что и тексты от человека, который отправил изображение, и должно быть чуть выше сообщения, которое было прикреплено к изображению (как это обычно и бывает).

Док HTML, на котором хранятся DMs:

thread.html:

соответствующий CSS-файл:

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; 
}

@Эдуардо Толмаским

Я пробовал добавить это, и даже методом проб и ошибок это ничего не изменило. Несмотря на это, мне удалось ~половину~ исправить это, только проблема в том, что теперь отправленные и полученные сообщения находятся не на той стороне! (т.е. сообщения, отправленные вошедшим пользователем, находятся слева, а полученные - справа, в большинстве приложений, таких как Whatsapp, все наоборот). Вот как это выглядит сейчас.

thread.html:

{% extends 'landing/base.html' %}
{% load crispy_forms_tags %}

{% block content %}

<div class="container">
    <div class="row">
        <div class="card col-md-12 mt-5 p-3 shadow-sm">
            {% if thread.receiver == request.user %}
                <h5><a href="{% url 'profile' thread.user.profile.pk %}"><img class="rounded-circle post-img" height="50" width="50" src="{{ thread.user.profile.picture.url }}" /></a> @{{ thread.user }}</h5>
            {% else %}
                <h5>@{{ thread.receiver }}</h5>
            {% endif %}
        </div>
    </div>

    {% if message_list.all.count == 0 %}
    <div class="row my-5">
        <div class="col-md-12">
            <p class="empty-text">No messages yet.</p>
        </div>
    </div>
    {% endif %}

    {% for message in message_list %}
    <div class="row">
        {% if message.sender_user == request.user %}
        <div class="col-md-12 my-1">
            {% if message.image %}
            <div class="message-sender-container ms-auto">
                <img src="{{ message.image.url }}" class="message-image" />
            </div>
            {% endif %}
            <div class="sent-message my-3">
                <p>{{ message.body }}</p>
            </div>
        </div>
            {% elif message.receiver_user == request.user %}
            <div class="col-md-12 offset-6">
                {% if message.image %}
                <div>
                    <img src="{{ message.image.url }}" class="message-image" />
                </div>
                {% endif %}
                <div class="received-message my-3">
                    <p>{{ message.body }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    {% endfor %} 

    <div class="row">
        <div class="card col-md-12 p-3 shadow-sm">
            <form method="POST" action="{% url 'create-message' thread.pk %}" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form | crispy }}
                
                <div class="d-grid gap-2 mt-3">
                    <button btn btn-light type="submit">Send Message</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock content %}

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: 35%;
}

.received-message {
        background-color: #cc64c3;
        color: #000;
        border-radius: 30px;
        padding: 10px 25px;
        width: 35%;
}

.message-sender-container {
        margin-left: auto;
        margin-right: 0;
}

.message-image {
        border-radius: 10px;
        max-width: 35%;
        height: auto;
}

.shared-post {
        margin-left: 30px; 
}
Вернуться на верх