多個div並排填充百分比和固定寬度

我有一個寬度爲100％的父div。我如何可以將div放在父div的每一邊，寬度爲40px，所以我有3個div內聯，父div具有整個視口寬度 - （2 * 40px）。多個div並排填充百分比和固定寬度

我做了什麼喜歡浮法：左邊所有3或每邊我使用跨度和父div有顯示：inline-block（考慮寬度：100％，但不要linebreak）我不能做它工作正常。

我需要兼容IE8 +和最新的FF /鉻/ 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: 
}

來源

2013-06-29 Pascal

與浮動，經典是彩車第一（左/右），然後在溢出流量中間：隱藏; http://codepen.io/anon/pen/iGvHd

否則，你有顯示：表;這是更連貫和堅實。它被IE8理解。 http://codepen.io/anon/pen/sBcjp

來源

2013-06-29 20:45:35

我猜你爲什麼浮動的原因：正確的非常正確的div是因爲中間的div與寬度：100％強制一個div與浮法：左到行break？但浮動：右div被迫向右。這個假設是否正確？是的，IE8似乎有一些浮動bugz ... – Pascal

@帕斯卡，是的，浮動之前，該元素是假設斷行元素之前，它是在流程中。 IE總是有一些奇怪的行爲:) –

當左/右div的寬度爲40px爲什麼我只看到這個寬度，當我把文本在這些divs？ – Pascal

多個div並排填充百分比和固定寬度

回答

相關問題