css - 多个 div 并排显示百分比和固定宽度内联

Question

我有一个宽度为 100% 的父级 div。我如何在父 div 的每一侧放置一个宽度为 40px 的 div，以便我有 3 个内联 div，而父 div 具有整个视口(viewport)宽度 - (2 * 40px)。

我做过什么喜欢 float:left 在所有 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

对于 float ，经典的是首先是 float (右/左)，然后是中间的溢出:隐藏； http://codepen.io/anon/pen/iGvHd

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