Vertical Align Bottom + Inline Block

I have the following HTML structure

Solution 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;
}

<divclass="box"><divclass="box1 item">1<br />1<br />1<br />1</div><divclass="box2 item">2<br />2<br />2</div><divclass="box3 item">3<br />3</div><divclass="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;
}

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

Solution 2:

The solution of Oriol is the right one. But if you want to be save with old browsers, use table instead.

One solution could be:

<divclass="wrapper"><divclass = "box"><divclass="box1 item">a</div><divclass="box2 item">s</div><divclass="box3 item">a</div><divclass="box4 item">p</div></div></div>  

.wrapper {
  display: table;
  width: 100%;
  height: 403px;
}

.box {
  display: table-cell;
  vertical-align: bottom;
}

.item { 
   display: inline-block;
   vertical-align: bottom;
   max-width: 20%;
}

Share