HTML Inline-Block DIV没有排队

Question

所以我现在设计一个网站(漂亮nooby在HTML和CSS),但我做了一个Photoshop的预先设计,这样我可以通过编码右转,使网站,我想怎样.好吧,我有一个问题.尽管使用了内联块,我在一个更大的容器DIV内部有两个DIV元素,它们不会并排排列.这是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最高DIV抱着我topContent和topThumbnail,所以我想我应该把它扔进所提供的代码.和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/