Question

我正在创建一个网站，并试图获得最佳的CSS设置（在所有浏览器上均可工作/响应），以创建一个区域，其中图像位于文本块的右侧或左侧。我听说flex是最好的选择，所以我尝试模仿其他使用flex设置的网站。到目前为止，我有一大堆代码适用于图像在右侧时，文本在左侧....但不适用于图像在左侧时而文本在屏幕上的情况。对。

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

.containerabcolumn {margin: 0 auto !important;}

如您所见，当我颠倒div a和b的顺序时，结果不好。在我的实际站点上，实际上没有重叠，但是图像如何溢出存在问题。当代码的第一部分缩小窗口大小时，事情将按预期进行……右侧图像超出了其div容器，并且随着窗口大小缩小而越来越多地被切断（很好）...但是，对于代码的第二部分，图像在左侧，文本在右侧，图像最终与文本重叠...而不是超出其容器的左侧（我想要的方式）。

有什么办法解决吗？

在此先感谢您提供的任何帮助，从您尝试描述问题的方式可以看出，我是一个完全的菜鸟。

此外，如果有人想到这组代码是否可以响应/可以在所有浏览器上运行/通常是一种聪明的方法，那也将很棒。

Answer 1

您只需要定义'width：100％;'到div中的图片像这样：

.b img {
    max-width: 700px;
    width: 100%;
}

Answer 2

Ciao

您要求使用正确的方法，所以我将给出两个答案。答案1回答您的请求。答案2是一种更优雅，更专业的解决方案-使用相同的CSS-能够显示两个视图，并根据目标屏幕进行了优化

解决方案1：在移动设备上也要尊重自己的意图

为了同时解决这两个问题

1）按照其他答案，将文本固定在图片上：

.b img {
  width: 100%;
}

2）删除flex: 0 0 auto;可以修复在移动设备上剪切的文本：

.a {
  -webkit-flex-basis: 41.667%;
  -ms-flex-preferred-size: 41.667%;
  flex-basis: 41.667%;
  max-width: 50%;
  margin: auto;
}

这是经过两次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;
    }
}

希望这对您有所帮助，并祝您有美好的一天，
安东尼诺

右图，左文字有效，但左图，右文字无效（对于网站）

2 个答案: