社交媒体DM私信模块CSS布局修复：图片与消息排列错位问题

问题原因 #

• 单独给发送方图片、文字气泡设置float: right会让元素脱离标准文档流，后续块级元素会自动环绕浮动元素排布，直接导致文字显示在图片侧边而非下方。
• 原样式中发送方容器的外边距配置写反：.message-sender-container设置margin-left: 0; margin-right: auto会强制容器靠左，和发送方消息靠右对齐的预期逻辑相反。
• 接收方图片外层冗余的offset-6偏移类会强制元素偏移半屏宽度，窄屏下容易出现布局溢出。

修复步骤 #

1. 替换CSS样式 #

直接用以下代码覆盖原有style.css中对应类的样式，核心是用Flex布局替代浮动实现对齐，保证同一条消息的图片、文字垂直排列：

.empty-text {
    color: #777;
    font-size: 1.5rem;
    text-align: center;
}

/* 发送方消息容器：整体靠右，子元素垂直排列、右对齐 */
.message-sender-container {
    max-width: 60%;
    margin-left: auto;
    margin-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* 发送方文字气泡：移除浮动，宽度适配内容 */
.sent-message {
    background-color: #d7a5eb;
    border-radius: 30px;
    padding: 10px 25px;
    max-width: 100%;
    margin: 0;
}

/* 发送方图片：移除浮动，宽度限制在容器范围内 */
.message-image-sent {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}

/* 接收方消息容器：整体靠左，子元素垂直排列、左对齐 */
.message-receiver-container {
    max-width: 60%;
    margin-left: 0;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

/* 接收方文字气泡 */
.received-message {
    background-color: #cc64c3;
    color: #000;
    border-radius: 30px;
    padding: 10px 25px;
    max-width: 100%;
    margin: 0;
}

/* 接收方图片 */
.message-image-received {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}

.shared-post {
    margin-left: 30px; 
}

2. （可选）调整HTML结构 #

将接收方消息的HTML结构调整为和发送方一致，移除图片外层冗余的偏移类，保证布局逻辑统一，修改后循环内的接收方代码如下：

{% elif message.receiver_user == request.user %}
<div class="col-md-12 my-1">
    <div class="message-receiver-container">
        {% if message.image %}
        <img src="{{ message.image.url }}" class="message-image-received" />
        {% endif %}
        <div class="received-message my-1">
            <p>{{ message.body }}</p>
        </div>
    </div>
</div>
{% endif %}

效果说明 #

• 发送方的图片、文字气泡整体靠右对齐，图片固定在关联文字正上方，无水平错位
• 接收方的图片、文字气泡整体靠左对齐，和主流社交产品私信布局逻辑一致
• 消息宽度自适应内容，长文本、大图片不会溢出屏幕，窄屏下显示正常

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