'流氓'div正在抵消其兄弟姐妹

Question

基本上我有一组在结构上几乎完全相同的div，然后跟着它们我有一个对于该集唯一的div。基本上，第一个div是一堆不同的类别，最后一个div是userprofile类型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;
}

输出：