1

我一直在阅读其他相关帖子，但找不到解决我的特定问题的方法。就是这样：我创建了一个基于 jCarouselLite 的滑块来显示书籍。它工作正常，但无论高度如何，我都想将图像放置在底部。我的意思是，就像现在一样，较短的图像与 LI 的顶部对齐。我知道父容器必须设置为位置：相对，子元素必须设置为绝对。我相信父框是“.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>
4

2 回答 2

1

我不完全确定您要完成什么，但是如果您使列表元素相对而图像绝对（就像您现在正在做的那样），将图像与底部对齐会起作用。

我稍微更新了你的例子，给列表元素一个边框、宽度和高度，这样你就可以看到它们在底部结束。

ul li{
   position: relative;
}

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

于 2013-10-10T16:24:20.077 回答
0

我认为您需要将绝对位置转移到 li 元素，然后在内部图像上使用 height 100% 和 min-height 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%;
}

看看这个小提琴。图片只有 150px 高：

http://jsfiddle.net/DJdSG/

于 2013-10-10T16:17:24.843 回答