Спозиционировать 2 картинки в CSS/HTML

216

15 мая 2018, 18:20

пытаюсь сверстать по макету и никак не получается разместить 2 картинки нужным образом. Первый раз обращаюсь за помощью, поэтому камнями не кидайтесь.Собственно сможет кто помочь сделать так, чтобы эти 2 картинки были на одном уровне по горизонтали с уже заданными отступами.

.party { 
  width: 420px; 
  height: 279px; 
  padding: 135px 60px 32px 150px; 
  float: left; 
} 
 
.coffee { 
  width: 419px; 
  height: 280px; 
  float: right; 
  padding: 135px 60px 32px 150px; 
}

<div> 
  <div><img class="party" src="http://via.placeholder.com/420x279"></div> 
  <div><img class="coffee" src="http://via.placeholder.com/419x280"></div> 
</div>

Answer 1

Пора бы уже забыть о float

* { 
  margin: 0; 
  padding: 0; 
} 
 
img { 
  display: block; 
  max-width: 100%; 
} 
 
.parent { 
  width:90%; 
  display: flex; 
  justify-content: space-around; 
  margin: 30px auto; 
} 
 
.parent div { 
  width: 40%; 
}

<div class="parent"> 
  <div class=""><img src="http://via.placeholder.com/420x279"></div> 
  <div class=""><img src="http://via.placeholder.com/419x280"></div> 
</div>