html - 右图，左图有效，但左图，右图无效(对于网站)

Question

我正在创建一个网站并尝试获得最佳的 css 设置(响应/适用于所有浏览器)以创建一个图像位于文本 block 右侧或左侧的部分。我听说 flex 是最好的方式，所以我尝试模仿其他使用 flex 设置的网站。到目前为止，我有一大块代码适用于图像在右边，文本在左边的情况……但是当图像在左边，文本在左边时，它不起作用正确的。

这是我的代码:https://codepen.io/7harrypotterrr/pen/MZEdVY

.containerabcolumn {margin: 0 auto !important;}

如您所见，当我颠倒 div a 和 b 的顺序时，结果很糟糕。在我的实际站点上，实际上没有重叠，但图像如何溢出存在问题。当第一部分代码的窗口大小缩小时，一切都按预期工作......右侧的图像超出其 div 容器并随着窗口大小缩小而越来越多地切断(这很好)...... .但是对于代码的第二部分，图像在左边，文本在右边，图像最终会与文本重叠......而不是超出其左侧的容器(我希望的方式)。

有什么解决办法吗？

预先感谢我获得的任何帮助，正如您从我尝试描述问题的方式中看出的那样，我是一个彻头彻尾的编码菜鸟。

此外，如果有人想知道这组代码是否响应/适用于所有浏览器/通常是一种聪明的方法，那也很好。

Answer 1

你问的是正确的方法，所以我会给出两个答案。回答 1 回答您的请求。答案 2 是一个更优雅、更专业的解决方案——使用相同的 css——能够显示两个 View ，并根据目标屏幕进行优化

解决方案 1:在移动设备上也尊重您的意图

为了解决这两个问题

1. 根据其他答案，这修复了图像上的文本:

   .b 图片 {宽度:100%；

2. 删除 flex: 0 0 auto; 修复了移动设备上的文本剪切问题:

   .a {-webkit-flex-基础:41.667%；-ms-flex-preferred-size: 41.667%; flex 基础:41.667%；最大宽度:50%； margin :自动；

这是两个 css 修改后在 Pixel2 XL 上的模拟

解决方案 2:最佳用户体验

上述解决方案模拟了桌面屏幕的动态。但在移动设备上，您希望更好地查看文本和图像。前面的解决方案不会发生这种情况。所以我的建议是使用这个 css。您将在桌面屏幕上保留您想要的相同布局，但是当您在移动设备上打开页面时，您将更好地重新组织内容

<style>
.containerabc {
    background-color: #fff;
    display: block;
    overflow: hidden;
    width: 100%;
}    

.containerabcolumn {
    margin: 0 auto !important;
    max-width: 1080px;
    float: none !important;
    position: static !important;
}

.containerabc .et_pb_text {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.a {
    -webkit-flex-basis: 41.667%;
    -ms-flex-preferred-size: 41.667%;
    flex-basis: 41.667%;
    max-width: 50%;
    margin: auto;
}
   
.b {
    -webkit-flex-basis: 58.333%;
    -ms-flex-preferred-size: 58.333%;
    flex-basis: 58.333%;
    max-width: 50%;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    flex-basis: auto;
    flex-basis: auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.b img {
    width: 100%;
}

@media only screen and (max-width: 600px) 
{   
    .containerabc .et_pb_text 
    {
        display: block;
    }
    
    .a 
    {
        margin: unset;
        max-width: 100%;
        padding: 20px;
    }
    
    .b
    {
        max-width: 100%;
        padding: 20px;
    }
}
</style>

桌面行为

移动行为

---

OP 澄清后更新

.containerabc {
    background-color: #fff;
    display: block;
    overflow: hidden;
    width: 100%;
}    

.containerabcolumn {
    margin: 0 auto !important;
    max-width: 1080px;
    float: none !important;
    position: static !important;
}

.containerabc .et_pb_text {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.a {
    -webkit-flex-basis: 41.667%;
    -ms-flex-preferred-size: 41.667%;
    flex-basis: 41.667%;
    max-width: 50%;
    margin: auto;
    display: inline-block;
    position: relative;
    top: 0px;
    left: 50px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 100px;
    padding-bottom: 150px;
    background: white;
}

.b {
    -webkit-flex-basis: 58.333%;
    -ms-flex-preferred-size: 58.333%;
    flex-basis: 58.333%;
    max-width: 50%;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    flex-basis: auto;
    flex-basis: auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.b img {
    width: 100%;
    min-width: 700px;
    position: relative;
    overflow: hidden;
}

@media only screen and (max-width: 600px) 
{   
    .containerabc .et_pb_text 
    {
        display: block;
    }

    .a 
    {
        margin: unset;
        max-width: 100%;
        padding: 20px;
        position: unset;
    }

    .b
    {
        max-width: 100%;
        padding: 20px;
    }
    
    .b img 
    {
        width: 100%;
        min-width: unset;
    }
}