代码之家 › 专栏 › 技术社区 › lud0h

使用CSS对齐图像列表

vertical-alignment alignment image css

0

lud0h · 技术社区 · 16 年前

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

背景:我希望一组照片与底部对齐,图片大小不同。

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

谢谢。

4 回复 | 直到 16 年前

1

2

Ryan Florence 16 年前

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

根据您的需要,这可能有效:

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

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

2

1

JonH 16 年前

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

1

James Goodwin 16 年前

下面的CSS应该做到这一点:

ul{ li-style-type: none;}

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

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

4

0

SvenFinke 16 年前

试试这个:

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

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