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>元素并修复错位。

Answer 2

要删除img周围的空间，可以添加“display：inline-block;”上课.pic-thumb。

.pic-thumb {
    width:  240px;
    height: 240px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: none;
    display: inline-block;
}

请参阅https://jsfiddle.net/mxevk9q6/2/

问候安迪

Answer 3

添加

display: inline-block;

到你的.pic-thumb {....}。这将解决它

为什么我的div不排队？

3 个答案: