为什么我的 div 没有对齐？ [复制]答案

【问题标题】：Why do my div's not line up? [duplicate]为什么我的 div 没有对齐？ [复制]
【发布时间】：2016-07-15 04:32:35
【问题描述】：

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;
}

【问题讨论】：

向.pic-thumb-box 类声明vertical-align: top; 规则。

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案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/

问候安迪

【讨论】：

【解决方案3】：

添加

display: inline-block;

到您的 .pic-thumb{....}。这样就解决了

【讨论】：