内联块元素未按预期显示

Question

我正在尝试使用inline-block将两个不同的div彼此对齐，但是它们像被阻止的元素一样堆叠。 具体来说，它们是包含图像的wrapper_image div和包含一些文本信息的about_div。

我有以下HTML：

<body>
    <header>
        ... header information here
    </header>
    <div class="wrapper_image">
        <img src="img/1935323_10153090821883239_4407778661294134622_n.jpg"  class="profile-photo">
    </div>
    <div class="about_div">
        <h3 id="about_me">About Me</h3>
        <p id="about_me_info">
            Text
        </p>
        <p id="about_me_info">
            Some more text
        </p>
    </div>
    <footer>
        <p>
            &copy; Name
        </p>
    </footer>
</body>

和CSS：

.wrapper_image {
    display: inline-block;
    vertical-align: top;
}

.about_div {
    display: inline-block;
    vertical-align: top;
}

.profile-photo {
    max-width: 350px;
    border-radius: 100%; /* adds rounded corners to an element */
}

#about_me {
    font-size: 2em;
}

#about_me_info {
    font-size: 1.5em;
}

Answer 1

一切似乎还可以。 我放了一个演示图片并以chrome显示，这看起来像

图片和文字是内联的，看起来还可以