Platz um die Inline-Blöcke

Question

Bitte diese Codepen betrachten: http://codepen.io/anon/pen/WooLwL

Es gibt 3 divs in einem div-Containern und die Summe aller divs Breite ist 960. Jedoch bei der Untersuchung, da dieser Leerraum ist rund um die divs, dass ich nicht loswerden über CSS. Ich habe bestätigt, die Marge ist 0.

<div id="columncontainer"> 
    <div id="column1"> 
    yolo 
    </div> 
    <div id="column2"> 
    <hr> 
    all column 2 data here 
    <hr> 
    </div> 
    <div id="column3"> 
    all column 3 data here 
    </div> 
</div> 

Answer 1

Sie müssen Schwimmer hinzufügen lösen: links

div#columncontainer div { 
    float: left; 
    position: relative; 
} 

prüfen diese codepen

Answer 2

div{ 
    float:left; 
} 

hinzufügen, die inline-block Probleme

body{ 
 
    background-color: #ccc; // page background color 
 
} 
 
div{ 
 
    float:left; 
 
} 
 
#columncontainer { 
 
width: 960px; 
 
margin: 0 auto; 
 
} 
 

 
#column1 { 
 
    display: inline-block; 
 
    width: 240px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #b3e; 
 
} 
 

 
#column2 { 
 
    display: inline-block; 
 
    width: 480px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #555; 
 
    
 
} 
 

 
#column3 { 
 
    display: inline-block; 
 
    width: 240px; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #999; 
 
} 
 

 
#footer { 
 
clear: both; 
 
} 
 

 
#image { 
 
margin-left: auto; 
 
} 
 

 
#columncontainer { 
 
background-color: white; 
 
}

<h1>Inline Block Nerd Zone</h1> 
 

 
<div id="columncontainer"> 
 
<div id="column1"> 
 
yolo 
 
</div> 
 

 
<div id="column2"> 
 
<hr> 
 
all column 2 data here 
 
<hr> 
 
</div> 
 

 
<div id="column3"> 
 
all column 3 data here 
 
</div> 
 
</div>