使用 CSS 对齐图像列表

【问题标题】：Align list of images using CSS使用 CSS 对齐图像列表
【发布时间】：2010-12-04 06:55:53
【问题描述】：

我想将图像列表与“底部”对齐，如何使用 CSS 来实现？

背景：我想让一组照片底部对齐，图像大小不同。

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

谢谢。

【问题讨论】：

<li> 元素的底部还是页面底部？
元素的底部，我希望它们都与底部对齐。我正在测试发布的解决方案。谢谢。

好的，我删除了我的答案，因为没有人喜欢最简单的解决方案。因此，正如其他人所建议的那样，您应该将标记保留在阻止它们按您希望它们工作的图像周围，然后添加大量 CSS 以使它们再次像原来一样工作......：P跨度>

标签： css image alignment vertical-alignment

【解决方案1】：

所有这些绝对定位的问题是 li 元素没有高度，因为 image 元素是绝对的并且不再推动任何布局。通常这是一个糟糕的解决方案。

根据您的需要，这可能会起作用：

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

此处的示例：http://mooshell.net/zBCGW/

【讨论】：

完美运行，我在使用另一个属性 'float: left;' 时遇到了问题但是一旦将其注释掉并添加了代码，它就可以正常工作。谢谢。

【解决方案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>

【讨论】：

【解决方案3】：

下面的 CSS 应该可以解决问题：

ul{ li-style-type: none;}

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

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

【讨论】：

需要使li位置：相对，否则图像将相对于其他东西（可能是身体）定位

【解决方案4】：

试试这个：

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

编辑：我刚刚读到它们打算与 li 元素的底部对齐。我更新了代码，使 img 与 li 元素的底部对齐。

【讨论】：