Не удается выровнять изображение в нижней части элемента li

Question

Я читал другие связанные сообщения, но не смог найти решение моей конкретной проблемы. Вот он: Я создал слайдер на основе jCarouselLite для отображения книг. Он работает нормально, но я хотел бы позиционировать изображения внизу, независимо от высоты. Я имею в виду, что, как и сейчас, более короткие изображения совпадают с верхней частью LI. Я знаю, что родительский контейнер должен быть установлен в позицию: relative и дочерний элемент в абсолютный. Я считаю, что родительский ящик - «.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

мне кажется, нужно, чтобы сместить абсолютное положение к элементу LI, а затем использовать высоту 100% в сочетании с мин-высота 100% на внутреннем изображении. Я не уверен, почему вы используете display: table-cell на li-элементах, это кажется ненужным.

.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/

Answer 2

Я не совсем уверен, что вы пытаетесь достичь, но совместив изображения в нижней части будет работать, если бы вы сделали список элементов относительного и Абсолютное изображение (как вы делаете сейчас).

Я немного обновил ваш пример, дал элементам списка границу, ширину и высоту, чтобы вы могли видеть их в нижней части.

ul li{ 
    position: relative; 
} 

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