0

Имеются 4 блока. У каждого из них идентичный код, который приведен ниже.
Как их расположить соответственно картинке ?
введите сюда описание изображения

Скриншот

введите сюда описание изображения

2 ответа 2

2

Вот таким способом - flexbox

codepen

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.items {
  width: 90vw;
  height: 100vh;
  margin: auto;
  background: url(http://hotnupics.com/pics/1412/lindsay-lohan-stockings.jpg);
  background-size: cover;
  background-position: right center;
  display: flex;
  justify-content: space-between;
}

.item {
  width: 25vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.itemes {
  width: 90%;
  min-height: 100px;
  background: rgba(255, 192, 203, 0.5);
  margin: 20px auto;
  padding: 20px;
}
<div class="items">
  <div class="item">
    <div class="itemes">
      <h4>Lorem, ipsum.</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, alias! </p>
    </div>
    <div class="itemes">
      <h4>Lorem, ipsum.</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, alias! </p>
    </div>
  </div>
  <div class="item">
    <div class="itemes">
      <h4>Lorem, ipsum.</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, alias! </p>
    </div>
    <div class="itemes">
      <h4>Lorem, ipsum.</h4>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, alias! </p>
    </div>
  </div>
</div>

1
  • Суперский код! рекомендую 13 мая 2018 в 5:00
1

почитайте сдесь

Разделите ваш row на 4 col ( с размерами сами разберетесь) и в первом и последнем установите text-align.

Ваш ответ

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

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