Allineare elenco di immagini usando i CSS

Question

Vorrei allineare un elenco di immagini a 'fondo', come posso raggiungere questo obiettivo usando i CSS?

Sfondo: voglio un insieme di foto essere allineati verso il basso, le immagini sono disponibili in diverse dimensioni

.

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

Grazie.

Answer 1

Il problema con tutto questo posizionamento assoluto è che gli elementi li non avranno altezza, poiché l'elemento immagine è assoluta e non spinge più qualsiasi layout. in genere questa è una cattiva soluzione.

A seconda di che cosa avete bisogno, questo potrebbe funzionare:

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

esempio vivo qui: 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; }

Poi

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

Answer 3

Il seguente CSS dovrebbe fare il trucco:

ul{ li-style-type: none;}

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

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

Answer 4

Basta provare provare questo:

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

EDIT: Ho appena letto che essi sono destinati ad essere allineata alla parte inferiore dell'elemento li. Ho aggiornato il codice in modo che l'img sarà allineato alla parte inferiore dell'elemento li.