이미지를 li 요소의 아래쪽에 맞출 수 없습니다.

Question

다른 관련 게시물을 읽었지만 특정 문제에 대한 해결책을 찾을 수 없습니다. 여기 있습니다 : jCarouselLite를 기반으로 책을 표시하는 슬라이더를 만들었습니다. 그것은 잘 작동하지만 높이에 관계없이 하단에 이미지를 배치하고 싶습니다. 즉, 이제는 더 짧은 이미지가 LI의 상단에 정렬됩니다. 부모 컨테이너는 position : relative로 설정되어야하고 child 요소는 절대로 설정되어야한다는 것을 알고 있습니다. 부모 상자가 ".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%; 
} 

이 피들을 살펴보십시오. 이미지는 150 픽셀 키가 :

http://jsfiddle.net/DJdSG/

Answer 2

난 당신이 목록의 요소가 상대하고 만들었던 경우 일 것이다 달성하기 위해 노력하고 있지만, 하단에 이미지를 정렬하는지 전혀 모르겠어요 이미지 절대 (당신이 지금하고있는 것처럼).

예제를 약간 업데이트하고 목록 요소에 테두리, widht 및 height를 지정하여 맨 아래에 끝나는 것을 볼 수 있습니다. 그것 뿐이다

ul li{ 
    position: relative; 
} 

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