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

У меня есть тег 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?

Ответы

Ответ 1

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

Использование display: table-cell хорошо, если вы знаете, что оно не будет работать в IE6/7. Кроме этого, это безопасно: Есть ли недостаток в использовании 'display: table-cell' on divs?

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

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

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

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

Ответ 2

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

Ответ 3

Флексбоксы могут сделать это с помощью align-items: flex-end; с display: flex; или display: inline-flex;

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

Пример JSFiddle

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

Ответ 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 */
}