0

我有一个 100% 宽度的父 div。如何在父 div 的每一侧放置一个宽度为 40px 的 div，这样我就有 3 个内联 div 并且父 div 具有整个视口宽度 - (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:
}
4

1 回答 1

1

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

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

于 2013-06-29T20:45:35.213 回答