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/

问题在于，即使两个div的总和是960px，这与父容器（#wrapper）的宽度相同，它们也不会相互浮动。我必须将侧边栏或主容器宽度缩回4px，以便它们适合。为什么会这样，是否有办法实现呢？

Answer 1

两个div之间有换行符;因为它们是inline-block，所以它们之间的换行符呈现为空格。 Without space它可以按预期工作。

Answer 2

添加浮动：左;到每个div，它的工作方式应该如此！ updated 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;
}

Answer 3

看看这个：jsfiddle。您需要将float：left添加到主栏和侧栏。并在它们之后添加清除块。

Answer 4

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

</div>和<div>

之间没有空格

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上测试它，效果很好。

为什么两个内联块在父包装器div中排成一行？

5 个答案: