‘'rogue’div正在偏移其同级

Question

基本上，我有一组在结构上几乎相同的div，然后在它们之后，我有一组唯一的div。基本上，第一个div是一堆不同的类别，最后一个div是一个用户配置文件类型square。我不明白的是，为什么用户配置文件正方形的渲染位置比其他div要高。

它们都有相同的css

  cursor: pointer;
  display: inline-block;
  margin: 10px;
  padding: 5px 5px 10px 5px;
  width: 219px;
  height: 219px;
  background: #fff;

容器有这样的css

display: block;
float: left;
width: 100%;
text-align: center;
padding: 15px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;

这是它看起来的样子

​

我猜这是因为div的内部结构不同，但我不确定它为什么要这样做。我还注意到，例如，如果某个类别div的图像没有加载，它的行为方式与我的流氓div相同。

在这个问题上的任何亮点都是非常感谢的。

Answer 1

对于display: inline-block;，最好总是将vertical-align: top;添加到子元素中(然后根据需要从那里格式化)，特别是当您的容器中有不同的元素类型或图像时。即使是子元素中的图像也会弄乱inline-block;的布局。inline-block元素还会受到“空格问题”的困扰，这会影响布局。为了防止出现这种情况，您可以将所有的子元素放在一起，或者注释掉空格。

演示：http://jsfiddle.net/ThinkingStiff/wwwkJ/

HTML：

<div id="container">
    <div class="child">one</div>
    <div class="child">two</div>
    <img class="child" />
</div>

<div id="container-align">
    <div class="child-align">one</div>
    <div class="child-align">two</div>
    <img class="child-align" />
</div>

<div id="container-align-whitespace">
       <div class="child-align">one</div><!--
    --><div class="child-align">two</div><!--
    --><img class="child-align" />
</div>

CSS：

.child {
    border: 1px solid red;
    display: inline-block;
    height: 50px;
    width: 50px;
}

.child-align {
    border: 1px solid red;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

#container, #container-align, #container-align-whitespace {
    border: 1px solid black;
    height: 100px;
    width: 300px;
}

输出：

​

​