Problem in der Anzeige konfrontiert: Inline-Block-Eigenschaft

Question

Ich versuche, zwei divs nebeneinander unter Verwendung css display: inline-block; Eigenschaft zu platzieren. Aber meine Divs sind untereinander angeordnet.

Link zu der Geige: - https://jsfiddle.net/04cc1n8j/

HTML

<div class='outerDiv'> 
    <div class='innerDiv1'></div> 
    <div class='innerDiv2'></div> 
</div> 

CSS

.outerDiv{ 
    width:300px; 
    height:200px; 
    margin:0px; 
    padding:0px; 
} 
.innerDiv1{ 
    width:100px; 
    height:200px; 
    display:inline-block; 
    background-color:red; 
    margin:0px; 
    padding:0px; 
} 

.innerDiv2{ 
    width:200px; 
    height:200px; 
    display:inline-block; 
    background-color:green; 
    margin:0px; 
    padding:0px; 
} 

Answer 1

Die Breite des weißen Raum zwischen den inline-block Elemente, Ihr Layout zu brechen. This article sollte helfen.