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

规范化内联块列表项高度

1 个答案: