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的总宽度为966px或更小时，这可以正常工作。然而，当我变大时，第二个div位于第一个div之下。为什么会这样？

据我所知，在遇到问题之前，我的总宽度应该是970px吗？

Answer 1

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

对于以下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; }

以下两个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 margin How to remove the space between inline-block elements?

Answer 3

当主div具有显示属性＆＃34;阻止＆＃34;（默认为1）时会发生此问题。

将主div的属性添加为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; }

为什么这个CSS不合适？

3 个答案: