为什么两个内联块不会在包裹它们的父级div中顶端对齐？

Question

我有这样的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/

问题是尽管两个

的宽度之和为960px，与父容器(#wrapper)的宽度相同，但它们并不会浮动在一起。我必须将侧边栏或主要容器的宽度缩小4px，以使它们适合。为什么会这样，是否有解决方法？

- Ayub

Answer 1

在这两个 div 之间有一个换行符；由于它们是 inline-block，所以它们之间的换行符会被渲染成一个空格。如果去掉空格，它将按照您的预期工作。

- lanzz

Answer 2

给每个 div 添加 float: left;，就可以使它按照预期工作了！更新的 jsFiddle

更新的代码：

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

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

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

- iDsteven

Answer 3

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

和

之间不要留空格。

- yunzen

Answer 4

看这里：jsfiddle。你需要在主块和侧边栏块中添加float:left属性，并在它们之后添加clear块。

- Xella

Answer 5

这是一种较早的技巧 - 您需要将包装容器(#wrapper)的字体大小设置为0px，然后将每个子元素设置为所需的字体大小。

这种技巧适用于几乎所有浏览器。但是，这次不是IE，而是Safari未能确认设置。

因此，代码应该像这样：

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

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

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

你可以在已经创建的jsfiddle上测试它，它能很好地工作。

- SimonDau