css 图像靠右，文本靠左有效，但图像靠左，文本靠右无效(对于网站)

我正在创建一个网站，并试图获得最好的CSS设置（响应性强/适用于所有浏览器），用于创建一个图像位于文本块右侧或左侧的部分。我听说Flex是最好的方法，所以我尝试模仿其他使用Flex设置的网站。到目前为止，我有一段代码适用于图像位于右侧的情况。而文字在左边....但是当图像在左边而文字在右边时，它就不起作用了。
下面是我的代码：https://codepen.io/7harrypotterrr/pen/MZEdVY

.containerabcolumn {margin: 0 auto !important;}

正如您所看到的，当我颠倒div a和B的顺序时，结果很糟糕。在我的实际站点上，实际上没有重叠，但是图像溢出有一个问题。当第一段代码的窗口大小缩小时，事情按预期工作...右边的图像超出了它的div容器，随着窗口大小的缩小，切掉了越来越多的内容（这很好）....然而，对于第二段代码，图像在左边，文本在右边，图像最终与文本重叠...而不是超出其容器到左边（我希望的方式）。
有什么办法吗？
提前感谢我得到的任何帮助，正如你可以从我试图描述我的问题的方式告诉，我是一个完整的编码新手。
此外，如果有人想知道这组代码是否响应迅速/在所有浏览器上都能工作/通常是一种智能方法，那也很好。

你问的是正确的方法，所以我会给予两个答案。答案1回答了你的要求。答案2是一个更优雅和专业的解决方案，在相同的css下，能够显示两个视图，根据目标屏幕进行优化

解决方案1：尊重您在移动的上的意愿

为了解决这两个问题
1.按照另一个答案，这将文本固定在图像上：
.B img {宽度：100%; }
1.删除flex: 0 0 auto;使得修复移动的上的文本剪切：
.a { -webkit-flex-basis：41.667%; -ms-flex-首选大小：41.667%;弹性基准：41.667%;最大宽度：50%;保证金：自动; }
这是在泛指el 2 XL上进行两次css修改后的模拟

解决方案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;
    }
}

css 图像靠右，文本靠左有效，但图像靠左，文本靠右无效(对于网站)

2条答案

相关问题

热门标签

最新问答