0

Не получается ничего. Перепробовал и разные Justify-content и другие способы. Но блок с img ведет себя как блок. border и заливка фоном для понятия где находится проблема. Если я размещаю 2 блок с текстом он появляется справа. с Изображением такого не происходит.

HTML, CSS code:

.benefits_container {
  /*OK */
  display: inline-flex;
  flex-flow: row wrap;
  flex: 2 2 2;
  flex-direction: row;
  text-align: justify;
  border: medium dashed rgb(255, 0, 0);
}

.benefits_text {
  /*OK */
  display: inline-flex;
  flex-wrap: nowrap;
  height: 80px;
  width: 400px;
  border: medium dashed rgb(0, 238, 255);
}

.advantages {
  /*OK */
  display: inline-flex;
  flex: 2 2 2;
  align-items: left;
  justify-content: space-between;
  justify-content: left;
  flex-wrap: wrap;
  width: 18%;
  margin: 5% 1% 5% 5%;
  font-size: 125%;
  white-space: nowrap;
  border: medium dashed green;
}

.image_advantages_block {
  display: inline-flex;
  position: relative;
  flex: 2 2 2;
  width: 100%;
  background-color: red;
}

.image_advantages {
  /* NOT */
  display: inline-flex;
  flex: 2 2 2;
  width: 20%;
}
<div class="benefits_container">
  <div class="advantages">
    <div class="image_advantages_block"><img class="image_advantages" src="images/delivery_lightning.png">
    </div>
    <p class="benefits_text">Доставка <br /> от 40 минут
    </p>
  </div>
  <div class="advantages">
    <img class="image_advantages" src="images/check_grocery.png">
    <p class="benefits_text">Качественные <br /> продукты
    </p>
  </div>
  <div class="advantages">
    <img class="image_advantages" src="images/star_cook.png">
    <p class="benefits_text">Повара — <br /> профессионалы
    </p>
  </div>
  <div class="button_gift">
    <form actions="index.html">
      <button class="gift" name="name_gift" value="value_gift" onclick="">
            Хочу подарок!
            </button>
    </form>
  </div>
</div>

1 ответ 1

1

Для блока .advantages указан flex-wrap: wrap;. Следовательно, блок с текстом переносится, так как картинка(width: 100%) с текстом(width: 400px) не умещаются в один ряд.

Чтобы это изменить, надо либо убрать flex-wrap: wrap;, либо установить подходящие размеры картинки и текста.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.