正火inline-block的列表項高度

Question

我有以下標記：

<ul class="info-list"> 
<li class="info-item"> 
    <div class="name">Name</div> 
     <img class="preview" src="/Image.png" /> 
    <div class="data-wrapper"> 
     Data 
    </div> 
    <div class="description"> 
     Description 
    </div> 
</li> 
<li class="info-item"> 
    <div class="name">Name</div> 
     <img class="preview" src="/Image.png" /> 
    <div class="data-wrapper"> 
     Data 
    </div> 
    <div class="description"> 
     Here is a description. More description. Very descriptive. 
    </div> 
</li> 
</ul> 

這裏是匹配的風格：

.info-list{ 
text-align: center; 
} 

.info-item{ 
margin: 4px; 
padding: 10px; 
display: inline-block; 
cursor: pointer; 
background-color: black; 
} 

.preview{ 
margin: 4px 4px 4px 0; 
float: left; 
display: block; 
width: 128px; 
height: 128px; 
} 

.data-wrapper{ 
margin: 4px 0 4px 4px; 
float: left; 
width: 128px; 
height: 128px; 
} 

.description{ 
clear: both; 
width: 264px; 
height: 100px; 
} 

，您將看到的問題是，第二個元素的高度等於與第一個，但它是從div.description元素的內容的長度支撐。這可以通過將white-space: nowrap應用於div.description或div.list-item元素來解決，但這會導致div.description內容向右溢出。我該如何修復這個列表？我不想浮動元素，因爲我希望它們在列表中居中，但內聯空白處理由於某些原因導致問題，即使div.description元素的高度/寬度都相同。

小提琴：http://jsfiddle.net/kap6quf6/2/

Answer 1

內聯元素的默認垂直對齊方式爲基準，這樣你就可以將其設置爲中等或頂部.info-item，使它們對齊：

.info-item { 
    margin: 4px; 
    padding: 10px; 
    display: inline-block; 
    cursor: pointer; 
    background-color: lightgray; 
    vertical-align:middle; 
} 

jsFiddle example