Выровнять список изображений с помощью CSS

Question

Я хотел бы выровнять список изображений по «низу», как я могу добиться этого с помощью CSS?

Фон: я хочу, чтобы ряд фотографий был выровнен по низу, изображения разных размеров.

<div>
  <ul>
    <li> <!-- image 1-->
    <li> <!-- image 2-->
    <li> <!-- image 3-->
  </ul>
</div>

Спасибо.

Answer 1

Проблема со всем этим абсолютным позиционированием заключается в том, что элементы li не будут иметь высоту, поскольку элемент изображения является абсолютным и больше не продвигает макет. как правило, это плохое решение.

В зависимости от того, что вам нужно, это может работать:

li {
  display: inline;
  vertical-align: bottom;
}

Живой пример здесь: http://mooshell.net/zBCGW/

Answer 2

Следующий CSS должен помочь:

ul{ li-style-type: none;}

li img {position:absolute;bottom:0;}

li {float:left;vertical-align:bottom;}

Answer 3

ul{ li-style-type: none;}

li{position:relative; float: left; width:100px; height: 100px; }

li img { display: block; position: absolute; bottom: 0; }

Тогда

<ul> <li><img /></li>...</ul>

Answer 4

Просто попробуйте попробовать это:

li img{
    position:absolute;
    bottom:0;
}
li{
    position:relative;
}

РЕДАКТИРОВАТЬ: Я только что прочитал, что они предназначены для выравнивания по нижней части элемента li. Я обновил код, чтобы img выровнялся по нижней части элемента li.