标签 css positioning
<分区>
我有一个宽度为 970 像素的 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 的总宽度？
最佳答案
我打赌你在 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; }
以下 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/并注意第二部分中元素之间的白线。
关于css - 为什么这个 CSS 不适合？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15780039/