html - display: inline-block DIV pushed downward

Question

Why the second DIV when using display: inline-block is pushing downward?

Here is my code what I have tried.

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/

I know that it works using float: left, but I can't use it in what I am trying to do.

Answer 1

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

要解决这个问题，只需添加一个垂直对齐：

.div2 {
  vertical-align: top;
}

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