为什么两个内联块不排列在父包装div的顶部？ [英] Why don't two inline-blocks line up to the top in parent wrapper div?

问题描述

我有这样的HTML

<div id="wrapper">
    <div id="main">
        <p>test</p>
    </div>
    <div id="sidebar">
        <p>test</p>
    </div>
</div>

和CSS

#wrapper {
    width: 960px;
    margin: 0px auto;
}

#main {
    width: 790px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
}

#sidebar {
    width: 170px;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    margin: 0px;
}

示例： http://jsfiddle.net/Hpwff/

问题是，即使两个div的总和为960px ，与父容器（#wrapper）的宽度相同，它们不会彼此相邻漂浮。我必须将侧边栏或主容器的宽度缩回4px，以便它们适合。为什么会这样，并且有解决方法？

The problem is that even though the sum of both divs is 960px, which is the same width as the parent container's (#wrapper), they do not float next to each other. I have to shrink either the sidebar or main containers width back by 4px so they fit. Why is this, and is there a way around it?

推荐答案

在两个之间有换行符div s;由于它们是 inline-block ，因此它们之间的换行符将显示为空格。 没有空间，它可以按您的预期工作。

You have a newline between the two divs; since they are inline-block, the newline between them is rendered as a space. Without space it works as you expect.

这篇关于为什么两个内联块不排列在父包装div的顶部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！