無法將圖像對齊到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％。我不知道你爲什麼在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/

Answer 2

我不是很確定你想要什麼來完成，但排列影像的底部會工作，如果你犯了列表元素相對的，絕對的圖像（就像你現在所做的那樣）。

我更新了你的例子，給列表元素一個邊框，widht和height，所以你可以看到它們在底部結束。

ul li{ 
    position: relative; 
} 

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