HTML Inline-Block DIV没有排队

所以我现在正在设计一个网站(在 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是持有我的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.由于某种原因,信息不会转到缩略图的右侧,而是去在它下面.我已将ALREADY设置为0以修复默认保证金问题.

解决方法

display：inline-block在您的示例中正常工作.您需要添加的是vertical-align：top到.topInfo div,并删除.topInfo p标记上的默认边距.此外,您需要确保.topInfo div有足够的空间放置在.topThumbnail div的一侧,否则它将换行到下一行.

像这样：

http://jsfiddle.net/hsdLT/

原文地址：https://www.jb51.cc/html/225156.html