显示：内联块DIV向下推

Question

为什么使用DIV时第二个display: inline-block向下推？

这是我尝试过的代码。

HTML

<div class="div1"></div><div class="div2"></div>

CSS

.div1{
    width: 400px;
    height: 500px;
    background: #F00;
    display: inline-block;
}
.div2{
    width: 300px;
    height: 200px;
    background: #00F;
    display: inline-block;
}

jsFiddle： http://jsfiddle.net/enve/fbreJ/

我知道它可以使用float: left，但我不能在我想要做的事情中使用它。

Answer 1

因为这是inline-block元素的工作方式。

要修复，只需添加垂直对齐：

.div2 {
  vertical-align: top;
}

jsFiddle演示： http://jsfiddle.net/enve/fbreJ/1/