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;

    }

这很好。

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

here is image

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>

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

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

Answer 2

我看到截图，现在很清楚你的意思。你最初的例子远没有价值，它是不完整的。我把它复制了，我看到所有的李在彼此之下，都完全对齐在底部。您应该创建一个short, self contained, correct example，它可以准确再现您遇到的问题。因此，从<html>到</html>，包括doctype和最低要求的样式。

现在我猜，但看起来您在float: left;元素而不是li上使用display: inline;来显示它们彼此相邻（内联）而不是每个下面其他（块）。默认情况下，浮点数与包含元素的顶部对齐，默认情况下，显示内联与包含元素的底部对齐。相应地修复它，看看在你的情况下是否有帮助。

UL对齐到底部

2 个答案: