多个 div 并排，百分比和固定宽度内联

Question

我有一个宽度为 100% 的父 div。如何在父 div 的每一侧放置一个宽度为 40px 的 div，这样我就有 3 个内联 div 并且父 div 具有整个视口宽度 - (2 * 40px)。

我喜欢浮动：在所有 3 个或每一侧都使用一个 span，并且父 div 有 display:inline-block（考虑宽度：100% 但不换行）我做不到正常工作。

我需要兼容 IE8+ 和最新的 FF/Chrome/Safari

这是我的代码示例：http://codepen.io/helloworld/pen/IGsoe

<div id="navBar">
    <div>
      <div style="height:100%;width:100%;background:lightgray;padding:5px;">
        <div data-bind="text: number"></div>        
      </div>
    </div>
    <div>
      <div style="height:100%;width:100%;width:100%;background:lightgray;padding:5px;">
        <div data-bind="text: number"></div> 
      </div>
    </div>
    <div>
      <div style="height:100%;width:100%;background:lightgray;padding:5px;">
        <div data-bind="text: number"></div> 
      </div>
    </div>
    <div>
      <div style="height:100%;width:100%;background:lightgray;padding:5px;">
        <div data-bind="text: number"></div> 
      </div>
    </div>
    <div>
      <div style="height:100%;width:100%;background:lightgray;padding:5px;">
        <div data-bind="text: number"></div> 
      </div>
    </div>
    <div style="clear:both;"></div>
</div>


:html, body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  font-family:arial;
}

*{
  box-sizing:border-box;
}

#navBar {
    width: 100%;
    height: 80px;     
}


#navBar > div {
    text-align:left;
    font-size:20px;
    width: 20%;
    height: 100%;
    border-width: 1px;
    border-color: #000;
    border-style: solid;    
    float:left;
    margin-left:
}

Answer 1

使用浮动，经典是浮动首先（右/左），然后在通量中居中，溢出：隐藏； http://codepen.io/anon/pen/iGvHd

否则，你有 display:table;这更加连贯和坚实。 IE8可以理解。 http://codepen.io/anon/pen/sBcjp