Как расставить блоки по бокам ? (css)

264

18 мая 2018, 13:50

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

Answer 1

Вот таким способом - 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>