html - 为什么我的 div 没有对齐？

Question

Demo 。我有一个带有 img 的 div 和另一个没有图像的 div，旨在作为占位符，但它们没有对齐。我的 html 显示除最后一个之外的所有 div 的中间部分。 demo显示了问题，但看起来并没有那么糟糕。

HTML:

<div class="profile-pics">
    <div class="pic-thumb-box"><img src="http://i.imgur.com/EclNgPI.jpg" class="pic-thumb" /></div>
    <div class="pic-thumb-box"><span class="pic-thumb"></span></div>
</div>

CSS:

.profile-pics {
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top
}
.pic-thumb-box {
    width:  250px;
    height: 250px;
    border: 1px solid;
    background: #555;
    display: inline-block;
    position:relative;
}
.pic-thumb {
    width:  240px;
    height: 240px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
}

Answer 1

出现此行为的原因是您的 .pic-thumb-box元素包含 .pic-thumb不同类型的元素。您的<img>元素将表现为 inline-block默认显示，但 <span>元素将表现为 inline展示。这可以防止 .pic-thumb类将宽度和高度应用到 <span>元素。如果添加display: inline-block;给您.pic-thumb正如另一个答案中建议的那样，您将能够将高度和宽度应用于 <span>元素并修复错位。