css内联块布局问题

Question

我遇到了display:inline-block CSS属性的问题。想象一下，我们有一些div，我们在这里为它们分配一个名为box的类是代码：

.box{
    border:5px gray solid;
    width:300px;
    height:200px;
    display:inline-block;
    margin:10px;
    word-wrap:break-word;
}

现在，如果我们有一些div，如果div的内容不为空，我们没有问题，但是有些div是空的，我们会有一些意想不到的结果。为什么呢？

我拍了照片：

This is when divs are full

This is when some divs are empty

即使我添加了一些nbsp;，但结果变为：

Answer 1

在您的div上设置vertical-align:top规则。内联元素的默认垂直对齐方式是基线，这是您所看到的。

Answer 2

在默认设置中使用display:inline-block时，div的垂直对齐方式设置为baseline。您可以将其更改为baseline，top，middle或bottom（最常用的值）。

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

要解决您的问题，请将其添加到css：

    vertical-align:top;

所以你有

.box{
   border:5px gray solid;
    width:300px;
    height:200px;
    display:inline-block;
    margin:10px;
    word-wrap:break-word;
    vertical-align:top;
}