HTML 内联 block DIV 未对齐

Question

所以我现在正在设计一个网站(在 HTML 和 CSS 方面相当菜鸟)，但我事先在 Photoshop 上做了一个设计，这样我就可以直接完成编码并按照我想要的方式制作网站。好吧，我有一个问题。我在一个更大的容器 DIV 中有两个 DIV 元素，尽管使用了内联 block ，但它们不会并排排列。这是CSS代码:

.contentContainer {
display: block;
width: 700px;
height: 250px;
margin: 20px auto;
}

.topContainer {
height: 230px;
padding: 10px;
background-color: white;
}

.topThumbnail {
display: inline-block;
width: 370px;
height: 230px;
}

.topThumbnail img {
width: 370px;
height: 230px;
}

.topInfo {
display: inline-block;
margin-left: 10px;
width: 300px;
height: 230px;
}

.topInfo p {
width: 300px;
height: 230px;
background-color: pink;
}

contentContainer 是包含我的 topContent 和 topThumbnail 的最高 DIV，因此我想我应该将其放入提供的代码中。 和 HTML 代码:

<div class="topContainer">
        <div class="topThumbnail">
            <img src="YT.png" />
        </div>
        <div class="topInfo">
            <p>Testing the information area of the top container or something along those lines</p>
        </div>
    </div>

无法发布图片来解释问题。需要 10 个声望。将难以描述。

在设计中，缩略图和信息的两个容器应该并排放置并在顶部对齐。缩略图应该位于 topContainer 的左侧，信息应该位于缩略图的右侧，边距为 10。出于某种原因，信息不会位于缩略图的右侧，而是位于缩略图的右侧在它下面。我已经将

边距设置为 0 以修复默认边距问题。

Answer 1

display: inline-block 在您的示例中正常工作。您需要添加的是 vertical-align: top 到您的 .topInfo div，并去掉默认的 margin 在你的 .topInfo p 标签上。此外，您需要确保有足够的空间让 .topInfo div 位于 .topThumbnail 的一侧div，否则会换行到下一行。

像这样:

http://jsfiddle.net/hsdLT/