0

我想将图像列表与“底部”对齐,如何使用 CSS 实现这一点?

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

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

谢谢。

4

4 回答 4

2

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

根据您的需要,这可能会起作用:

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

现场示例:http: //mooshell.net/zBCGW/

于 2009-10-06T14:23:41.957 回答
1
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>
于 2009-10-06T14:01:07.273 回答
1

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

ul{ li-style-type: none;}

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

li {float:left;vertical-align:bottom;}
于 2009-10-06T14:01:26.257 回答
0

试试这个:

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

编辑:我刚刚读到它们打算与 li 元素的底部对齐。我更新了代码,因此 img 将与 li 元素的底部对齐。

于 2009-10-06T14:17:03.757 回答