css - 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

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要素の下部に配置されるようにしました。