显示：内嵌块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元素的工作方式。

要修复的是，只需添加一个垂直aligment：

.div2 { 
    vertical-align: top; 
} 

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