Выравнивание содержимого в блоке

175

18 августа 2021, 06:20

Есть несколько блоков div с display:inline-block; в них по картинке.

Так как height у изображений разный хочу выровнять их но центру нижнего края.

Как я могу это сделать?

Answer 1

Можно использовать display: flex:

.list { 
  display: flex; 
  width: 100%; 
  height: 150px; 
  background: #ccc; 
  flex-direction: row; 
  column-gap: 5px; 
  align-items: flex-end; 
} 
 
.item { 
  display: block; 
  width: 100%; 
  background: green; 
} 
 
.item:nth-child(odd) { 
  background: blue; 
}

<div class="list"> 
  <div class="item" style="height: 20px"></div> 
  <div class="item" style="height: 120px"></div> 
  <div class="item" style="height: 50px"></div> 
  <div class="item" style="height: 12px"></div> 
  <div class="item" style="height: 42px"></div> 
  <div class="item" style="height: 123px"></div> 
  <div class="item" style="height: 95px"></div> 
</div>