vertical align bottom + inline block

Question

I have the following HTML structure

<div class = "box">
  <div class="box1 item"></div>
  <div class="box2 item"></div>
  <div class="box3 item"></div>
  <div class="box4 item"></div>
</div>

box1 -> box4 has a display of inline-block.

.box {
   min-height: 403px;
}
.item { 
   display: inline-block;
   vertical-align: bottom;
   max-width: 20%;
}

For some reason, I cannot vertically align the divs with class "item" to the bottom of the box container. Does anyone know why?

Each element with class name item is part of a carousel that bleeds to the next page. Meaning each page shows 3.5 images.

Answer 1

vertical-align: bottom aligns inline-level elements to the bottom of their line box.

.box {
  min-height: 403px;
  border: 1px solid blue;
}
.item { 
  display: inline-block;
  vertical-align: bottom;
  border: 1px solid;
}

<div class="box">
  <div class="box1 item">1<br />1<br />1<br />1</div>
  <div class="box2 item">2<br />2<br />2</div>
  <div class="box3 item">3<br />3</div>
  <div class="box4 item">4</div>
</div>

If you want to align them to the bottom of the container, you need more advanced layouts, like CSS tables, or flexbox:

.box {
  display: flex;
  align-items: flex-end;
  min-height: 403px;
  border: 1px solid blue;
}
.item { 
  border: 1px solid;
}

<div class="box">
  <div class="box1 item">1<br />1<br />1<br />1</div>
  <div class="box2 item">2<br />2<br />2</div>
  <div class="box3 item">3<br />3</div>
  <div class="box4 item">4</div>
</div>