Question

我正在尝试使用内联块将两个不同的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中，这看起来像

图像和文本是内嵌块，似乎没问题

内联块元素未按预期显示

1 个答案: