6

我有这样的 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 以使其适合。为什么会这样，有没有办法解决它？

4

5 回答 5

14

您在两个divs 之间有一个换行符；因为它们是inline-block，所以它们之间的换行符呈现为一个空格。没有空间，它可以按您的预期工作。

于 2012-06-18T19:39:39.240 回答
2

添加浮动：左；到每个 div，它应该像它一样工作！更新了 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;
}​
于 2012-06-18T19:37:16.933 回答
2

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

于 2012-06-18T19:43:04.800 回答
2 
<div id="wrapper">
    <div id="main">
        <p>test</p>
    </div><div id="sidebar">
        <p>test</p>
    </div>
</div>

</div>和之间没有空格<div>

于 2012-06-18T19:43:13.013 回答
1

这是较老的技巧之一 - 您需要将包装容器 (#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 上对其进行测试，它运行良好。

于 2014-12-02T17:59:43.013 回答