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

Question

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

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

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

Спасибо.

Answer 1

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

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

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

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

Answer 2

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 3

Следующий CSS должен сделать свое дело:

ul{ li-style-type: none;}

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

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

Answer 4

Просто попробуй попробуй это:

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

Редактировать:Я только что прочитал, что они предназначены для выравнивания по нижней части элемента li.Я обновил код, чтобы изображение было выровнено по нижней части элемента li.