html - 两个 div 彼此相邻，当文本在另一个中时，一个向下移动

Question

我使用 display: inline-block 显示了两个 div，以便让它们彼此相邻。这适用于两个 div 中都没有文本的情况。但是，当我将文本放在一个 div 中时，它会急剧向下移动，而另一个则保持相同的位置。无论我将文本放入哪个 div，都会发生这种情况；但是，如果我将它同时放在两者中，则只有左侧的 div 会下降。

这里有一个代码笔来说明我的意思:http://codepen.io/anon/pen/MwEKPp

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

#main_container {
    width: 1000px;
    height: 95%;
    margin: 0 auto;
    font-size: 0px;
}

#logo {
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: aqua;
    font-size: 20px;
}

#title_area {
    display: inline-block;
    font-size: 20px;
    height: 200px;
    width: 800px;
    background-color: rgb(60,105,123);
    font-family: "open sans";
    font-size: 60px;
}

<div id="main_container">
    <div id="logo_title_area">
        <div id="logo">
          test
        </div>
        <div id="title_area">
          test
        </div>
    </div>
</div>

在标记为 logo 和 title_area 的 div 中输入文本将产生我正在谈论的效果。

有人知道如何解决这个问题吗？无论内容如何，​​我都需要它们并排放置。提前致谢!

Answer 1

它只是缺少垂直对齐方式，默认值为 baseline。

E {
    display: inline-block;
    vertical-align: top;
}