UL对齐到底部

Question

个人资料图片1图片简介图片2图片

css for be bellow.

     #album{
height:195px;
width:155px;
overflow:hidden;
padding:6px 10px 14px 10px;
    float:left;

  }
#album li{
    border:0; 
    padding:0;
    list-style:none;
    margin: 0 0.15em;
    list-style:none;
    display: inline;
   }

   #album img{
  vertical-align:bottom;
   }
    #album a{
        color:#000000;
        text-decoration:none;

    }
    #album .user-title{
        display:block;
        font-weight:bold;
        margin-bottom:4px;
        font-size:11px;
        color:#36538D;
    }
    #album .addas{
        display:block;
        font-size:11px;
        color:#666666;
    }
    #album img{
        margin-right:14px;
        padding:4px;

    }

这工作正常.

但我需要在显示屏上将图像对齐到底部.

这是图像

Answer 1

这是一个简单的解决方案,<li>可以在您的案例中将所有内容与底部对齐:http://jsfiddle.net/EmGqZ/

<style>
      ul#album {
        list-style-type: none;
    } #album li {
        float: left;
    }
    li div {
        vertical-align: bottom;
        height: 415px;
        display: table-cell;
    }?
</style>

<ul id="album">
    <li><div>
        <a href="#">
            <img src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/96/Drives-B-Metro-icon.png" /> 
        </a>
        <p><a href="#">Profile Pictures</a></p>
        <p>1 Picture</p>
    </div></li>

    <li><div style="padding-left: 15px">
        <a href="#">
            <img src="http://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Drives-A-Metro-icon.png" /> 
        </a>
        <p><a href="#">Profile Pictures</a></p>
        <p>1 Picture</p>
    </div></li>
</ul>?

这里的主要细节是display: table-cell;在css中声明位于li元素内的所有div.

PS我认为多次使用相同的ID是个坏主意.但我想这是一个错误的印刷品.