Question

所以我现在正在设计一个网站（非常注重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.由于某种原因，信息不会转到缩略图的右侧，而是去在它下面。我已将

保证金设置为0以修复默认保证金问题。

Answer 1

display: inline-block在您的示例中正常运行。您需要为vertical-align: top .topInfo添加div，并删除margin标记上的默认.topInfo p。此外，您需要确保.topInfo div有足够的空间坐在.topThumbnail div旁边，否则它将换行到下一行

像这样：

http://jsfiddle.net/hsdLT/

Answer 2

一个更清洁的解决方案：我会考虑完全抛弃这些元素上的display:inline-block CSS比例，然后将float放在左边。然后通过将clear:both分配给.topInfo css属性来清除浮动。

这样你的路线就会减少代码，而且结构更健全。：d

.topThumbnail,
.topInfo {
    float:left;
}
.topInfo {
    clear:both;
}

Answer 3

其他人已经用解决方案回答了这个问题，但我认为了解内联块元素为什么会这样表现很重要。所有内联、表格以及本例中的内联块元素都具有 vertical-align 属性。默认值设置为基线，因此需要设置vertical-align: top;。

请参阅此处的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align。其他讨论也很有帮助：Vertical alignment for two inline-block elements not working as expected

HTML Inline-Block DIV没有排队

3 个答案: