使用 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。网/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 元素的底部对齐。