Быстрый вопрос: Изменение 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;
}