移动端（手机屏幕）CSS+HTML段落左对齐调整方案求助

我在16:9电脑屏幕上实现了文字居左、图片居右的布局，显示正常。但在手机等小屏幕设备上，虽然图片已经显示在段落上方，可段落没法左对齐到指定位置。我是前端新手，附上当前的媒体查询代码和截图，求可行的代码方案：

当前使用的媒体查询代码 #

@media(max-width: 700px){
    
   
    .project1-img{
        flex-basis: 10%;
        width: 350px;
        margin: 20px;
    }
    
    .project-one{
        float: right;
        width: 750px;
        margin: 20px;
        padding-left: 10px;  
        inline-size: 1000px;
    }   
}

调整方案 #

你的代码里有几个问题导致段落无法左对齐，修改后的代码如下：

@media(max-width: 700px){
    .project1-img{
        flex-basis: 10%;
        width: 350px;
        margin: 20px;
        /* 可选：让图片在小屏幕居中显示，不需要可以删掉 */
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .project-one{
        /* 删掉右浮动，避免段落靠右 */
        /* float: right; */
        /* 删掉过大的固定宽度，改成自适应屏幕的宽度 */
        width: calc(100% - 40px);
        margin: 20px;
        /* 根据需求调整左内边距，要和图片对齐就设成和图片一样的margin值 */
        padding-left: 0;
        /* 删掉超出屏幕的行宽设置 */
        /* inline-size: 1000px; */
        /* 强制左对齐，确保不受其他样式影响 */
        text-align: left;
    }   
}

额外说明 #

• 如果350px的图片在小屏幕上还是太宽，可以把width: 350px改成width: 100%，让图片自适应屏幕宽度
• width: calc(100% - 40px)是为了让段落宽度减去左右各20px的margin，避免超出屏幕
• 要是需要精准对齐，直接给.project-one设置和.project1-img一样的margin-left数值就行

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