CSSを使用して画像リストを整列させる

Question

画像のリストを「下」に揃えたいのですが、CSS を使用してこれを実現するにはどうすればよいですか?

背景：一連の写真を下に配置したいのですが、画像のサイズが異なります。

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

ありがとう。

Answer 1

この絶対配置の問題は、image 要素が絶対的でレイアウトをプッシュしないため、li 要素に高さがなくなることです。通常、それは悪い解決策です。

必要なものに応じて、これは機能する可能性があります。

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要素の下に整列されることを意図していることを読みました。 IMGはli要素の下に整列されますので、私は、コードを更新します。