HTML image bottom alignment inside DIV container

Question

I have a div tag with a fixed height. Most of the images have the same height and width.

I want to align the images at the bottom of the div so that they are nicely

Answer 1

Flexboxes can accomplish this by using align-items: flex-end; with display: flex; or display: inline-flex;

div#imageContainer {
    height: 160px;  
    align-items: flex-end;
    display: flex;

    /* This is the default value, so you only need to explicitly set it if it's already being set to something else elsewhere. */
    /*flex-direction: row;*/
}

JSFiddle example

CSS-Tricks has a good guide for flexboxes