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

使用CSS对齐图像列表

4 个答案: