html - 如何使用CSS使一个ul的多个li中的图像按底部边缘对齐？

Question

jsfiddle:http://jsfiddle.net/MhcTz/

• 图片是谷歌图片搜索随机选择的，只是为了演示大小差异)

• 更新到非常接近想要的结果，只需要使整个 ul 居中。

我正在寻找纯 CSS 解决方案，这意味着我可以保持 HTML 干净，而不是为了视觉效果而将一个 div 嵌入另一个 div。

预期结果:

[img1]       [img2]      [img3]
--------------------------------
            [notes1]    [notes2]

目前我得到:

--------------------------------
[img1]       [img2]      [img3]
            [notes1]    [notes2]

HTML:

<ul class="subject-contents">
   <li> <img src="images/img1.png"> </li>
   <li>
        <img src="images/img2.png">
        <p>notes...</p>
   </li>
   <li>
        <img src="images/img3.png">
        <p>notes...</p>
   </li>
</ul>

CSS:

ul.subject-contents {
    /* it is horizontal but valign top */
    list-style-type: none;
    width:75%;
    overflow:auto;
    margin:0 auto;
    padding-bottom: 64pt;
    background: url(../images/bottom_boarder.png) center bottom no-repeat;
    text-align:center;
}

ul.subject-contents li {
    float:left;
}

ul.subject-contents li img+p{
   /* ?? */
}

ul.subject-contents li:last-child(){
   float:clear;
}

Answer 1

这里有两个可能可行的原型(prototype)。

使用 float

试试下面的 CSS:

ul.subject-contents {
    /* it is horizontal but valign top */
    list-style-type: none;
    width:75%;
    overflow:auto;
    margin:0 auto;
    padding-bottom: 64pt;
    XXXX background: url(../images/bottom_boarder.png) center bottom no-repeat;
    XXXX text-align:center;
    border: 1px solid blue;
    margin: 0;
    padding:0;
    position: relative;
    height: 120px;
}
ul.subject-contents:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 2px dotted gray;
    width: 100%;
}
ul.subject-contents li {
    float:left;
    border: 1px dotted blue;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 60px;
    position: relative;
}
ul.subject-contents li img {
    position: absolute;
    bottom: 0;
}
ul.subject-contents li p {
    margin: 0;
    position: absolute;
    top: 70px;
    width: inherit; /* you may need to set this */
    background-color: beige;
}
ul.subject-contents li:last-child(){
   float:clear;
}

参见演示:http://jsfiddle.net/audetwebdesign/2uc2h/

如果你依赖 float ，你需要设置一些高度和宽度来获得你想要的效果。

使用表格单元格

更简单的方法是使用display: table-cells，例如:

<div class="subject-contents">
    <div class="row-wrap r1">
        <p><img src="http://placehold.it/100x30"></p>
        <p><img src="http://placehold.it/100x50"></p>
        <p><img src="http://placehold.it/100x30"></p>
    </div>
    <div class="row-wrap r2">
        <p>notes...</p>
        <p>notes...</p>
        <p>notes that can wrap...</p>
    </div>
</div>

div.subject-contents {
    display: table;
    border: 1px solid blue;
}
div.row-wrap {
    display: table-row;
}
div.row-wrap p {
    display: table-cell;
    border: 1px dotted gray;
}
div.row-wrap img {
    vertical-align: bottom;
}

查看其他演示:http://jsfiddle.net/audetwebdesign/VtVuY/