1

Допустим у вас есть div, вы прописываете этому div-у стиль и в этот самый див вкладываете еще картинку и текст. По идее картинка должна быть внутри дива (визуально), но это не так. введите сюда описание изображения

По коду это выглядит примерно вот так:

.loremipsum1 {
  background-color: rgb(121, 123, 231);
  padding: 2%;
  margin: 3%;
  color: white;
}

.cartonka {
  float: left;
  margin: 3%;
  transform: translateY(-10%);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>модальные окна</title>
  <link rel="stylesheet" href="styles.css" />
  <meta name="viewport" content="width=device-width">



</head>

<body>

  <main>
    <div class="loremipsum1">
      <img src="250X250.png" class="cartonka"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>


  </main>



  <script src="main.js"></script>
</body>

</html>

Раньше я с такими проблемами не встречался. А если и встречался то как то сам делал, но сейчас я собираюсь делать все по красивому и адаптивному. Подскажите как решить эту проблему правильно.

0

1 ответ 1

0

Можно с помощью flexbox:

.loremipsum1 {
  display: flex;
  justify-content: space-between;
  background-color: rgb(121, 123, 231);
  padding: 2%;
  margin: 3%;
  color: white;
}

.cartonka {
  width: 250px;
  height: 250px;
  display: block;
  margin: 3%;
  transform: translateY(-10%);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>модальные окна</title>
  <link rel="stylesheet" href="styles.css" />
  <meta name="viewport" content="width=device-width">



</head>

<body>

  <main>
    <div class="loremipsum1">
      <img src="250X250.png" class="cartonka">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>


  </main>



  <script src="main.js"></script>
</body>

</html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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