CSS设置float:right后聊天消息图片与文本未按预期对齐

当前布局异常核心是浮动属性导致的文档流错乱：给图片单独加float: right后，图片会脱离正常文档流，后续的文本消息块会沿图片侧边排布，才会出现图文水平并排的问题；同时发送方的图片、文本气泡没有被包裹在同一个对齐容器内，无法实现整体对齐、纵向排列的效果。

1. 替换样式代码 #

把原有style.css中和消息相关的样式替换为以下内容，用flex纵向布局+容器整体对齐的逻辑替代单独给元素加浮动的方案，从根源避免文档流错乱：

/* 单条消息行 清除浮动影响 */
.message-row {
    width: 100%;
    overflow: hidden;
    margin: 8px 0;
}
/* 发送方消息容器 整体右对齐 内部纵向排列 */
.sent-message-wrapper {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
/* 接收方消息容器 整体左对齐 内部纵向排列 */
.received-message-wrapper {
    float: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.sent-message {
    background-color: #d7a5eb;
    border-radius: 30px;
    padding: 10px 25px;
    max-width: 25%;
    margin: 0;
}
.received-message {
    background-color: #cc64c3;
    color: #000;
    border-radius: 30px;
    padding: 10px 25px;
    max-width: 25%;
    margin: 0;
}
.message-image-received {
    border-radius: 10px;
    max-width: 35%;
    height: auto;
}
.message-image-sent {
    border-radius: 10px;
    max-width: 35%;
    height: auto;
}

2. 调整模板结构 #

修改thread.html里的消息循环部分，把同一条消息的图片、文本气泡包裹到同一个对齐容器内，同时修复原代码中发送按钮缺少class属性的bug：

{% for message in message_list %}
<div class="row message-row">
    {% if message.sender_user == request.user %}
    <div class="col-md-12">
        <div class="sent-message-wrapper">
            {% if message.image %}
            <img src="{{ message.image.url }}" class="message-image-sent" />
            {% endif %}
            <div class="sent-message">
                <p>{{ message.body }}</p>
            </div>
        </div>
    </div>
    {% elif message.receiver_user == request.user %}
    <div class="col-md-12">
        <div class="received-message-wrapper">
            {% if message.image %}
            <img src="{{ message.image.url }}" class="message-image-received" />
            {% endif %}
            <div class="received-message">
                <p>{{ message.body }}</p>
            </div>
        </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 class="btn btn-light" type="submit">Send Message</button>
            </div>
        </form>
    </div>
</div>
</div>

{% endblock content %}

• 发送方的图片、文本气泡整体靠聊天框右侧对齐，接收方内容整体靠左侧对齐
• 同一条消息的图片默认显示在文本气泡上方，纵向排列，不会出现图文水平并排的错位问题
• 保留原有圆角、配色、尺寸设计，符合通用私信界面的交互规范

内容的提问来源于stack exchange，提问作者L02