css - 标准化内联 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 向右溢出的内容。我该如何修复这个列表？我不想 float 元素，因为我希望它们在列表中居中，但内联空白处理由于某种原因导致问题，即使 div.description 元素都是相同的高度/宽度。

fiddle :http://jsfiddle.net/kap6quf6/2/

Answer 1

内联元素默认的垂直对齐方式是baseline，所以你可以为.info-item设置为middle或者top，这样它们就对齐了:

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

jsFiddle example