css - 为什么这个 CSS 不适合？

Question

我有一个宽度为 970px 的 div。（也就是说，当然，不包括边框、边距和填充）。我在其中并排放置了两个 div。这是他们的 CSS：

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; }

现在，当内部 div 的总宽度为 966 像素或更少时，这可以正常工作。然而，当我变得更大时，第二个 div 位于第一个 div 之下。为什么会这样？

据我所知，在遇到问题之前我应该​​能够拥有 970px 的总宽度？

Answer 1

div我打赌你在 HTML 中这两个 s之间有新的界限，这就是原因。

对于以下 CSS：

#main { width: 970px; }

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }

以下 2 个 HTML 标记之间存在差异：

<div id="main">
    <div id="content"></div><div id="sidebar"></div>
</div>

和

<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
</div>

检查此示例： http: //jsfiddle.net/vnguQ/并注意第二部分元素之间的白线。

Answer 2

两个 div 之间可能有空格，并inline block为该空格应用样式。看看这些链接 http://css-tricks.com/fighting-the-space-between-inline-block-elements/ display: inline-block extra边距 如何删除行内块元素之间的空间？

Answer 3

当主 div 具有显示属性“块”（默认一个）时，会发生此问题。

为主 div 添加一个属性 as dispaly:inline，它会自动调整内部 div 的宽度。更改主 div 的 css。

#main { width: 970px; display:inline; }

#content { display: inline-block; width: 720px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: red; }
#sidebar { display: inline-block; width: 246px; border: 0px; padding: 0px; margin: 0px; height: 200px; background: blue; }