Question

我有100％宽度的父div。如何在父div的每一侧放置一个宽度为40px的div，所以我有3个div内联，父div有整个视口宽度 - （2 * 40px）。

我做什么样的漂浮：左边所有3或每边我使用跨度而父div有显示：内联块（考虑宽度：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

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

1 个答案: