爲什麼這個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的總寬度爲966px或更少。然而，當我比這更大時，第二個div位於第一個之下。這是爲什麼？

據我所知，在我遇到問題之前，我應該能夠擁有970像素的總寬度？

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; } 

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

Answer 3

發生此問題時，有主的div顯示屬性「塊」（默認whitespace.Take一）。

添加主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; }