WordPress移动端图片浮动时文本截断的CSS修复问询

这个问题在WordPress站点里确实很普遍——当用编辑器给图片设置左/右浮动后，大屏幕上文本环绕显示很正常，但到了移动端，屏幕宽度不够，文本硬挤在图片旁边就会出现截断、换行混乱的情况。咱们可以通过媒体查询+CSS适配来解决，核心思路就是：只在屏幕空间足够容纳图片和旁边文本时，才保留浮动效果；空间不足时，让图片独占一行，文本正常排列。

具体修复方案 #

把你当前的.alignleft CSS代码替换成下面这段：

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

/* 针对小屏幕设备的适配规则 */
@media (max-width: 600px) {
    .alignleft {
        float: none;          /* 取消浮动，让图片独占一行 */
        margin-right: 0;      /* 清除右侧外边距 */
        margin-bottom: 1em;   /* 给图片下方加间距，避免文本紧贴 */
        width: 100%;          /* 图片占满屏幕宽度 */
        height: auto;         /* 保持图片比例，防止变形 */
    }
}

代码细节说明： #

• @media (max-width: 600px)：你可以根据自己的需求调整这个宽度值（比如改成768px适配平板设备），当屏幕宽度小于等于这个值时，就会触发里面的样式。
• float: none：彻底取消图片的浮动属性，让它脱离浮动流，文本自然会排在图片下方，不会再出现截断问题。
• width: 100%; height: auto：确保图片在小屏幕上自适应宽度，同时维持原有比例，避免拉伸变形。

如果你的站点也用到了.alignright（右浮动图片），可以用同样的逻辑适配：

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

@media (max-width: 600px) {
    .alignright {
        float: none;
        margin-left: 0;
        margin-bottom: 1em;
        width: 100%;
        height: auto;
    }
}

为什么这个方法能解决问题？ #

WordPress默认的浮动类没有做移动端适配，当屏幕空间不足时，文本试图强行挤在图片旁，就会出现排版错乱。通过媒体查询，我们给小屏幕设备单独设置了兼容样式，既保留了大屏幕上的文本环绕效果，又让移动端的排版回归正常流式布局，完美兼顾两种场景。

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