Выравнивание изображения HTML снизу внутри контейнера DIV

Question

У меня есть тег div с фиксированной высотой. Большинство изображений имеют одинаковую высоту и ширину.

Я хочу выровнять изображения в нижней части div, чтобы они были хорошо расположены. Вот что у меня так далеко:

<div id="randomContainer">
    <div id="imageContainer">
        <img src="1.png" alt=""/>
        <img src="2.png" alt=""/>
        <img src="3.png" alt=""/>
        <img src="4.png" alt=""/>
    </div>
    <div id="navigationContainer">
        <!-- navigation stuff -->
    </div>
</div>

CSS выглядит так:

div#imageContainer {
    height: 160px;  
    vertical-align: bottom;
    display: table-cell;
}

Мне удалось выровнять изображения внизу с display: table-cell и vertical-align: bottom атрибуты css

Есть ли более чистый способ отображения div в виде ячейки таблицы и выравнивания изображений внизу тега DIV?

Answer 1

Это ваш код: http://jsfiddle.net/WSFnX/

С помощью display: table-cell Это нормально, при условии, что вы знаете, что это не будет работать в IE6/7. Кроме этого, это безопасно: есть ли недостаток в использовании `display:table-cell`on divs?

Чтобы исправить пространство внизу, добавьте vertical-align: bottom к фактическому imgs:

http://jsfiddle.net/WSFnX/1/

Удаление пространства между изображениями сводится к следующему: bikeshedding CSS3 свойство альтернатива?

Итак, вот демонстрация с удаленными пробелами в вашем HTML: http://jsfiddle.net/WSFnX/4/

Answer 2

Установите родительский div как position:relative и внутренний элемент position:absolute; bottom:0

Answer 3

Flexboxes может сделать это с помощью align-items: flex-end; flex-direction: column; с display: flex; или же display: inline-flex;

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

У CSS-Tricks есть хорошее руководство для флексбоксов

Answer 4

<div> с некоторыми пропорциями

div {
  position: relative;
  width: 100%;
  height: 100%;
}

<img> со своими пропорциями

img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: auto; /* to keep proportions */
  height: auto; /* to keep proportions */
  max-width: 100%; /* not to stand out from div */
  max-height: 100%; /* not to stand out from div */
  margin: auto auto 0; /* position to bottom and center */
}