Question

我一直在阅读其他相关帖子，但我无法找到解决我的特定问题的方法。这里是：我创建了一个基于jCarouselLite的滑块来显示书籍。它工作正常，但我想将图像放在底部，无论高度如何。我的意思是，就像现在一样，较短的图像与LI的顶部对齐。我知道必须将父容器设置为position：relative，将child元素设置为absolute。我相信父框是“.carousel”，子框架是元素LI中包含的图像。我尝试了几个选项无济于事。任何帮助将不胜感激。

    .slider {
    float: left;
    margin-left: 3em;
}
.carousel {
    float: left;
    width: 68.75%; /*72.916666667%;*/
    background: #CCCCCC;
    height: 210px!important;
    position: relative; /* DOES NOT WORK */
}
.carousel ul li{
    display: table-cell;
    padding-right: 0.75em;
}
.carousel ul li img{
    -webkit-box-shadow: 7px 0px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 0px 5px rgba(50, 50, 50, 0.75);
        position: absolute; /* DOES NOT WORK */
bottom: 0;      /* DOES NOT WORK */
}
-----HTML-----
<div class="slider">
    <div class="carousel">
          <ul>
              <li><a href="#"><img src="../static/images/getcover_002.jpe" title="#titulo_libro"  alt="1"></a></li>
              <li><a href="#"><img src="../static/images/getcover_small.jpe" title="#titulo_libro"  alt="2"></a></li>
              <li><a href="#"><img src="../static/images/getcover_005.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_006.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_007.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_008.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_010.jpe" title="#titulo_libro"  alt="3"></a></li>
              <li><a href="#"><img src="../static/images/getcover_011.jpe" title="#titulo_libro"  alt="3"></a></li>
          </ul>
      </div>
</div>

Answer 1

我不完全确定你要完成什么，但是如果你将列表元素设置为相对且图像是绝对的（就像你现在正在做的那样），那么将图像对齐到底部就可以了。

我稍微更新了你的例子，给列表元素一个边框，widht和height，这样你就可以看到它们最终在底部。

ul li{
   position: relative;
}

http://jsfiddle.net/jaap/x79H4/

Answer 2

我认为您需要将绝对位置移动到li元素，然后在内部图像上使用高度100％和最小高度100％。我不确定你为什么在li元素上使用display：table-cell，这似乎没必要。

.carousel ul li {
    display: table-cell;
    padding-right: 0.75em;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.carousel ul li img {
    -webkit-box-shadow: 7px 0px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 0px 5px rgba(50, 50, 50, 0.75);
    min-height: 100%;
}

看看这个小提琴。图像只有150像素高：

http://jsfiddle.net/DJdSG/

无法将图像对齐到li元素的底部

2 个答案: