Html 图像右，文本左起作用，但图像左，文本右不起作用；t（适用于网站）

我正在创建一个网站，并试图获得最佳的css设置（响应/在所有浏览器上工作），以创建一个部分，其中图像位于文本块的右侧或左侧。我听说flex是最好的选择，所以我试着模仿其他使用flex设置的网站。到目前为止，我有一段代码适用于图像在右边，文本在左边……但它不适用于图像在左边，文本在右边

这是我的密码：

正如你所看到的，当我颠倒a和b的顺序时，结果是糟糕的。在我的实际站点上，实际上没有重叠，但存在图像溢出的问题。当第一段代码的窗口大小缩小时，一切正常…右边的图像超出了它的div容器，随着窗口大小的缩小，它被越来越多地截断（这很好）…但是对于第二段代码，图像在左边，文本在右边，图像最终与文本重叠…而不是超出其容器的左侧（我希望的方式）

有没有办法解决这个问题

提前感谢您对我的帮助，从我试图描述我的问题的方式可以看出，我完全不懂编码

---

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

您只需定义“宽度：100%；”到您在div中的图像。类似于：

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

---

您只需定义“宽度：100%；”到您在div中的图像。类似于：

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

再见

你要求正确的方法，因此我将给出两个答案。回答1回答你的要求。答案2是一个更加优雅和专业的解决方案，使用相同的css，可以显示两个视图，根据目标屏幕进行优化

解决方案1：在手机上也尊重您的意图

为了解决这两个问题

1） 这将根据另一个答案，将文本固定在图像上：

.b img {
  width: 100%;
}

2） 删除

flex:0自动修复移动设备上的文本剪切：

.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>

希望这对你有所帮助，祝你度过愉快的一天，

安东尼诺
再见

你要求正确的方法，因此我将给出两个答案。回答1回答你的要求。答案2是一个更加优雅和专业的解决方案，使用相同的css，可以显示两个视图，根据目标屏幕进行优化

解决方案1：在手机上也尊重您的意图

为了解决这两个问题

1） 这将根据另一个答案，将文本固定在图像上：

.b img {
  width: 100%;
}

2） 删除
flex:0自动修复移动设备上的文本剪切：

.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>

希望这对你有所帮助，祝你度过愉快的一天，

Antonino
此解决方案只能在桌面上正常工作。OP也对响应性感兴趣，在手机上文本被剪切。此外，正如我在回答的第2部分中所说，保持OP方法很可能不是这些问题的最佳解决方案devices@Antonino我认为在移动设备中不需要使用flexbox，并且事件将图像和文本保持在同一行-图像下的文本是在移动设备中显示详细图像和文本的最佳方式。完全同意。我编写了一些响应页面，到目前为止我从未使用过flexbox。如果您看到我的解决方案2，当它涉及到
@仅媒体屏幕时
，flexbox没有任何功能。而手机的最终布局正是“图片下的文本”，我们似乎同意这一点。谢谢你的回复，祝你度过愉快的一天@安东尼诺：是的，这是一个很好的解决方案：）祝你今天过得愉快！此解决方案仅在桌面上正常工作。OP也对响应性感兴趣，在手机上文本被剪切。此外，正如我在回答的第2部分中所说，保持OP方法很可能不是这些问题的最佳解决方案devices@Antonino我认为在移动设备中不需要使用flexbox，并且事件将图像和文本保持在同一行-图像下的文本是在移动设备中显示详细图像和文本的最佳方式。完全同意。我编写了一些响应页面，到目前为止我从未使用过flexbox。如果您看到我的解决方案2，当它涉及到
@仅媒体屏幕时
，flexbox没有任何功能。而手机的最终布局正是“图片下的文本”，我们似乎同意这一点。谢谢你的回复，祝你度过愉快的一天@安东尼诺：是的，这是一个很好的解决方案：）祝你今天过得愉快！嗨，谢谢你的帮助。我现在使用的代码的问题是，它不再允许我的图像溢出（可能溢出不是正确的词，所以让我进一步解释）这就是我想要的图像如何保持相同的大小，但被切断（其他一切都被切断的词弄乱了…特别是图像左侧的部分，文本右侧的墙）：使用当前解决方案（宽度：100%，无更多弹性，0 0自动），图像缩小：这不是我的意图，因为图片