Сбой CSS в чате между двумя пользователями на платформе социальных сетей

Платформа социальной сети: Я пытаюсь добиться того, чтобы изображение располагалось над отправленным сообщением, как это делается в большинстве стандартных сообщений DM: example

Но по какой-то причине мои изображения прилипают к правой стороне окна чата: без CSS

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

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

style.css:

.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%;
        float: left;
}

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

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

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

thread.html:

    {% 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>
                <img src="{{ message.image.url }}" class="message-image-sent" />
            </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">
                {% if message.image %}
                <div class="message-receiver-container ms-auto">
                     <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 %}

Было бы здорово, если бы вы предоставили рабочий пример, но я думаю, что вам нужно обернуть изображение и текст в другой div, к которому затем можно прикрепить display: flex; flex-direction: column; - посмотрите на фрагмент ниже

body { font-family: sans-serif; margin: 0 }
* { box-sizing: border-box }

#messages {
  height: 100%;

  display: flex;
  flex-direction: column;
}

.message {
  margin-bottom: 0.5rem;
  max-width: calc( (100% / 3) * 2 );
  position: relative;
  
  display: flex;
  flex-direction: column;
}
.message.from {
  --color: #d7a5eb;
  margin-right: auto;
  padding-left: 3rem;
}
.message.to {
  --color: #cc64c3;
  margin-left: auto;
  padding-right: 3rem;
}

.message::before {
  background-color: var(--color);
  border-radius: 100%;
  content: '';
  display: block;
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: 0;
  transform: translateY(0.625rem);
}
.message.from::before {
  left: 0.5rem;
}
.message.to::before {
  right: 0.5rem;
}

.message .img {
  border-radius: 1rem;
  overflow: hidden;
}
.message .img img { display: block }

.message .txt {
  background-color: var(--color);
  border-radius: 1rem;
  padding: 1rem;
}

.message.hasTxt.hasImg .img { border-radius: 1rem 1rem 0 0 }
.message.hasTxt.hasImg .txt { border-radius: 0 0 1rem 1rem }
<div id="messages">
  <div class="message from hasImg hasTxt">
    <div class="img">
      <img src="https://picsum.photos/500?random=1">
    </div>
    <div class="txt">
      Commodo erat curae integer elit adipiscing in a vestibulum enim enim habitasse a tempus id iaculis inceptos sagittis montes faucibus.
    </div>
  </div>
  <div class="message from hasTxt">
    <div class="txt">
      Inceptos sagittis montes faucibus.
    </div>
  </div>
  <div class="message to hasTxt">
    <div class="txt">
      Commodo erat curae integer elit adipiscing in a vestibulum enim enim habitasse a tempus id iaculis inceptos sagittis montes faucibus.
    </div>
  </div>
  <div class="message to hasTxt">
    <div class="txt">
      Integer elit adipiscing in a vestibulum enim.
    </div>
  </div>
  <div class="message to hasImg">
    <div class="img">
      <img src="https://picsum.photos/500?random=2">
    </div>
  </div>
  <div class="message from hasTxt">
    <div class="txt">
      CURAE INTEGER!!!
    </div>
  </div>
</div>

Для рабочего примера:

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><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-sent" />
>             </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">
>                 {% if message.image %}
>                 <div class="message-receiver-container ms-auto">
>                      <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 %}

style.css:

.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;
        display: flex; 
        flex-direction: column;
}

base.html:

{% load static %}

<!doctype html>
{% load crispy_forms_tags %}
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <script src ="https://kit.fontawesome.com/1d71f92e0a.js" crossorigin="anonymous"></script>
    <link href="{% static 'style.css' %}" rel="stylesheet">
    <title>Academicie</title>
  </head>
  <body> 
    {% block content %}
    {% endblock content %}

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <script type="text/javascript" src="{% static 'js/social.js' %}"></script>
  </body>
</html>

Я знаю, что многое из того, что включено в код здесь, должно быть связано с чем-то, чтобы это работало (например, URL-адреса профиля пользователя, фотографии профиля, URL-адреса изображений сообщений), поэтому, пожалуйста, дайте мне знать, что еще мне нужно добавить, чтобы работающий пример функционировал :)

Вернуться на верх