無法獲取圖像對齊底部與基礎塊網格類

Question

我正在使用基金會4.0框架，我有一個塊網格我想創建。每個li包含具有固定寬度的圖像，但所有圖像的高度不相同。我需要將圖像和文字與div的底部對齊。以下是我的html。我試圖改變父div來定位相對位置和絕對位置，但無法獲得任何工作。任何幫助是極大的讚賞。

CSS：

li { 
    display:inline-block; 
    vertical-align: bottom; 
    text-align: center; 
} 
img { 
    max-width: 127px; 
    height: auto; 
    margin-bottom: 0.7em; 
} 

// All other styles are defined by the ul.large-block-grid-4 within Foundation. 

HTML：

<div class="card-shadow-wrapper"> 
    <ul class="small-block-grid-2 large-block-grid-4"> 
    <li> 
     <a href="http://example.com"> 
     <img class="cover" src="image1.png"> 
     <p>Book 1 Title</p> 
     <p>Some Cool Author</p> 
     </a> 
    </li> 
    <li> 
     <a href="http://example.com"> 
     <img class="cover" src="image2.png"> 
     <p>Book 2 Title</p> 
     <p>Some Cool Author</p> 
     </a> 
    </li> 
    <li> 
     <a href="http://example.com"> 
     <img class="cover" src="image3.png"> 
     <p>Book 3 Title</p> 
     <p>Some Cool Author</p> 
     </a> 
    </li> 
    <li> 
     <a href="http://example.com"> 
     <img class="cover" src="image4.png"> 
     <p>Book 4 Title</p> 
     <p>Some Cool Author</p> 
     </a> 
    </li> 
    </ul> 
</div> 

Answer 1

我結束了在我的CSS添加float:none到li固定這一點。這對齊了所有的東西，但是當縮小瀏覽器尺寸時，我的圖像堆疊在一起。然後，我在<li>內部添加了一個div，然後它似乎正確地崩潰了。

修正CSS：

li { 
    display:inline-block; 
    vertical-align: bottom; 
    text-align: center; 
} 

更正HTML：

<li> 
    <div> 
    <a href="http://example.com"> 
     <img class="cover" src="image4.png"> 
     <p>Book 4 Title</p> 
     <p>Some Cool Author</p> 
    </a> 
    </div> 
</li>