Как лучше расположить данные элементы?

Question

Как я понял можно в принципе данный блок сделать через абсолютное позиционирование, либо через отрицательные отступы, как будет лучше в данной ситуации? И как лучше адаптировать этот блок под мобильные устройства? Моя задумка в том, что бы либо просто убирать эту картинку, а блок с текстом позиционировать по центру, либо картинку ставить сверху, а блок с текстом снизу. Заранее спасибо <3

Answer 1

Я бы вам посоветовал пойти совершенно другим путем. Делал бы так

.wrapp {
  margin: 100px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;

}

.image {
  width: 100%;
  max-width: 200px;
  min-height: 200px;
  border: 1px solid #000;
  text-align: center;
  background-color: pink;
}

.text {
  position: relative;
  width: 100%;
  max-width: 200px;
  background-color: #F7ECE1;
  padding: 30px;
}

.text:before {
  content: "";
  position: absolute;
  left: -60px;
  /* размеры отступов в зависимости от дизайна */
  top: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  background-color: #F7ECE1;
  z-index: -1;
}

<div class="wrapp">
  <div class="image"> image</div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis aliquam quam ex aut voluptatem obcaecati corporis, doloribus culpa nobis facere deleniti est repudiandae! Et sapiente consectetur quam quas, deleniti consequatur placeat vitae, totam earum natus dolor facilis! Enim officia cumque magnam assumenda repellat animi consectetur quis quas sunt quidem, modi, totam cum nemo inventore necessitatibus eaque. Corporis quae, excepturi minus atque sequi, beatae doloremque veritatis minima aliquam exercitationem cum consectetur aut. Eaque repellat facere aliquam, iure sed dignissimos deleniti porro inventore magni consectetur ullam officia animi adipisci sit quasi perspiciatis doloremque fugit molestias reprehenderit quos ratione omnis corrupti. Debitis ipsum est, possimus nam in molestiae provident. Alias ducimus qui hic ullam sed rerum omnis harum, quibusdam atque impedit sequi doloribus numquam eum cumque, pariatur sunt doloremque, veritatis nihil voluptatem dolore.
  </div>
</div>

Тогда при медиазапросах не надо будет париться с этими перекрытиями так сильно.

БЛОГ НА HUSL

Как лучше расположить данные элементы?

Ответы (1 шт):