快速提问:社交媒体网站上DMs的CSS更改

Question

我正在尝试将图像排在发送的消息的上方，就像在大多数标准的3 3qyiXqlI中显示的那样(我希望它看起来像什么)。

但是由于某种原因，附加到图像上的文本继续在图像旁边而不是在图像下面分层，如下面的屏幕截图所示。当我以一种奇怪的方式将图片和文本层添加到CSS中时：它现在的样子

理想情况下，图像应该与发送图像的人的文本位于同一一边，并且应该刚好高于附在图像上的信息(这是很常见的)。

DMs存储在HTML文档上：

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">
>            
>             <div class="message-sender-container ms-auto">
>                 {% if message.image %}
>                 <img src="{{ message.image.url }}" class="message-image-sent" />
>                 {% endif %}
>                 <div class="sent-message my-1">
>                     <p>{{ message.body }}</p>
>                 </div>
>             </div>
>             
>     
>         </div>
>             {% elif message.receiver_user == request.user %}
>             <div class="col-md-12">
>                 {% if message.image %}
>                 <div class="message-receiver-container offset-6">
>                      <img src="{{ message.image.url }}" class="message-image-received" />
>                 </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 %}

相关的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; 
}

Answer 1

@Eduardo Tolmasquim

我试着添加这个，即使是尝试和错误，它也没有改变任何东西。尽管如此，我还是设法将它修复了一半，现在唯一的问题是发送的消息和接收到的消息都在错误的一边！(也就是说，登录用户发送的消息在左边，接收到的消息在右边，在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; 
}