使用CSS对齐图像列表 [英] Align list of images using CSS

问题描述

我想将图片列表底部，如何使用CSS实现这一点？

背景：我想要一组照片对齐到底部，图片大小不一。

 < div& 
< ul> 
< li> <！ -  image 1  - > 
< li> <！ -  image 2  - > 
< li> <！ -  image 3  - > 
< / ul> 
< / div> 
  

谢谢。

解决方案

所有这些绝对定位的问题是li元素将没有高度，因为image元素是绝对的，并且不再推送任何布局。

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

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

I would like to align a list of images to 'bottom', how can I achieve this using CSS?

Background: I want a set of photos to be aligned to the bottom, the images are in different sizes.

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

Thanks.

解决方案

The problem with all this absolute positioning is that the li elements will have no height, since the image element is absolute and doesn't push any layout anymore. typically that's a bad solution.

Depending on what you need, this could work:

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

Live example here: http://mooshell.net/zBCGW/

这篇关于使用CSS对齐图像列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！