Warum sind zwei Inline-Blöcke nicht im Wrapper div oben angeordnet?

Question

Ich habe meine HTML-ähnliche

<div id="wrapper"> 
    <div id="main"> 
     <p>test</p> 
    </div> 
    <div id="sidebar"> 
     <p>test</p> 
    </div> 
</div> 

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

Beispiel: http://jsfiddle.net/Hpwff/

Das Problem ist, dass, obwohl die Summe der beiden divs ist 960px, die die gleiche Breite als die übergeordneten Container (#wrapper), schwimmen sie nicht nebeneinander. Ich muss entweder die Breite der Seitenleiste oder der Hauptcontainer um 4 px verkleinern, damit sie passen. Warum ist das so, und gibt es einen Weg darum herum?

Answer 1

Sie haben eine neue Zeile zwischen den beiden div s; da sie inline-block sind, wird die neue Zeile zwischen ihnen als ein Leerzeichen wiedergegeben. Without space es funktioniert so, wie Sie es erwarten.

Answer 2

Hinzufügen float: links; zu jedem div und es funktioniert wie es soll! updated jsFiddle

Aktualisiert Code:

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

Answer 3

Suchen Sie diese: jsfiddle. Sie müssen float hinzufügen: links zu Ihren Haupt- und Seitenleisten. Und fügen Sie einen klaren Block nach ihnen hinzu.

Answer 4

<div id="wrapper"> 
    <div id="main"> 
     <p>test</p> 
    </div><div id="sidebar"> 
     <p>test</p> 
    </div> 
</div> 

Kein Raum zwischen </div> und <div>

Answer 5

Dies ist eines der älteren Tricks - die Schriftgröße des Verpackungsbehälters (#wrapper) auf 0px und dann jedes der Kinder einstellen müssen was auch immer die Schriftgröße, die Sie benötigen.

Dieser Trick funktioniert auf fast allen Browsern. Diesmal ist es jedoch nicht IE, sondern Safari, das das Setup nicht bestätigt.

So sollte der Code wie folgt aussehen:

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

Sie können es testen auf dem bereits erstellt jsfiddle, es funktioniert gut.