Изображение справа, текст слева работает, но изображение слева, текст справа нет (для веб-сайта)

Question

Я создаю веб-сайт и пытаюсь получить наилучшие настройки CSS (отзывчивый / работает во всех браузерах) для создания раздела, в котором изображение находится справа или слева от блока текста.Я слышал, что лучше всего использовать flex, поэтому я попытался имитировать другие веб-сайты, использующие настройку flex.До сих пор у меня есть кусок кода, который работает, когда изображение находится справа, а текст слева ..., но не работает, когда изображение слева, а текст -право.

Вот мой код: https://codepen.io/7harrypotterrr/pen/MZEdVY

.containerabcolumn {margin: 0 auto !important;}

Как вы можете видеть, когда я меняю порядки div a и b, результаты плохие.На моем реальном сайте наложения практически нет, но есть проблема с переполнением изображения.Когда размер окна сокращен для первой части кода, все работает как задумано ... изображение справа выходит за пределы контейнера div и обрезается все больше и больше по мере уменьшения размера окна (это хорошо) .... Однако для второго раздела кода, где изображение находится слева, а текст справа, изображение в конечном итоге перекрывает текст ... вместо того, чтобы выходить за пределы контейнера (так, как я хочу).

Есть идеи, как это исправить?

Заранее благодарю за любую помощь, которую я получаю, и, как вы можете судить по тому, как я пытался описать свою проблему, я полный нуб в программировании.

Кроме того, если у кого-то возникнут мысли о том, является ли этот набор кода отзывчивым / работает во всех браузерах / как правило, разумный подход, это тоже было бы замечательно.

Answer 1

Чао,

Вы просите правильный подход, поэтому я дам два ответа.Ответ 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;
}

Это симуляция на Pixel2 XL после двух модификаций CSS

Решение 2: лучший UX

Предыдущее решение имитирует динамику экрана рабочего стола.Но на мобильном телефоне вы хотите лучше видеть текст и изображение.Этого не происходит с предыдущим решением.Поэтому я предлагаю пойти с этим 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>

Поведение рабочего стола

Мобильное поведение

---

Обновление после уточнения ОП

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

Надеюсь, это поможети хорошего дня,Antonino

Answer 2

Вам просто нужно определить 'width: 100%;'к вашему изображению внутри div.Что-то вроде:

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