html - 显示 : inline-block DIV pushed downward

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/