包含div邊距或填充的CSS流體佈局導致溢出

我有一個jsfiddle其中最外層包裝div具有100％的寬度。我想創建內部div（tb_margin或tb_padding），其內容應從左側開始40px。我嘗試使用margin和padding來創建這個40px的左空格，但在這兩種情況下，由於寬度爲100％，實際的div伸出右側。包含div邊距或填充的CSS流體佈局導致溢出

我希望製表符被包含在一個div（tb_margin或tb_padding）中，這個div是從左邊偏移40px的，但是應該拉伸到整個寬度直到右邊框。

我不想把溢出隱藏在（tb_margin或tb_padding）中，因爲這樣做時，如果選項卡太多，選項卡將被隱藏。理想情況下，製表符應該換行到（tb_margin或tb_padding）所包含的下一行。

<h1>hello</h1> 
<div style="width:100%;height:100px;border: 1px solid red"> 
    <div style="width:100%;height:50%; border: 1px solid blue"> 
     <div style="height:100%;width:150px;float:left; border:1px solid yellow"> logo</div> 
     <div style="float:right;border:1px solid green;"> User| 13-Nov-13| Logout </div> 
    </div> 
    <div id="tb_margin" style="width:100%;margin-left:40px;border:1px solid green">tabbbs with margin here </div> 
    <div id="tb_padding" style="width:100%;padding-left:40px;border:1px solid grey">tabbbs with padding here </div> 
</div>

我真恨不得CSS盒子佈局更加直觀的，還是我失去了一些東西

來源

2013-02-26 samarjit samanta

爲您所想要達到的最簡單的方法就是不指定的保證金或填充的div width: 100%。默認情況下，所有div顯示爲block，這意味着它們將伸展以填充剩餘的水平空間。

實際指定width: 100%的問題，正如您發現的那樣，是在寬度計算之上添加了水平填充和邊距 - 如果未指定寬度，瀏覽器將自動計算所需的寬度以填補該空間，其可能不是其父母的100%。

將來最好只在需要時應用width: 100%（例如使用浮動物時），並且避免指定尺寸（如果可以避開它）。

<h1>hello</h1> 
<div style="width:100%;height:100px;border: 1px solid red"> 
    <div style="width:100%;height:50%; border: 1px solid blue"> 
    <div style="height:100%;width:150px;float:left; border:1px solid yellow"> 
     logo 
    </div> 
    <div style="float:right;border:1px solid green;"> 
     User| 13-Nov-13| Logout 
    </div> 
    </div> 
    <div id="tb_margin" style="margin-left:40px;border:1px solid green"> 
    tabbbs with margin here 
    </div> 
    <div id="tb_padding" style="padding-left:40px;border:1px solid grey"> 
    tabbbs with padding here 
    </div> 
</div>

來源

2013-02-26 18:13:12 Pebbl

box-sizing來救援！

#tb_padding { 
    width:100%; 
    padding-left:40px; 
    border:1px solid grey; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

這裏的演示：http://jsfiddle.net/pavloschris/nepC3/25/ 和一些信息：https://developer.mozilla.org/en-US/docs/CSS/box-sizing

來源

2013-02-26 18:05:03 xpy

+1很好的修補填充 - 我不會有雖然那個盒子大小會有這種影響 - 可惜它似乎並沒有爲邊緣工作。 – Pebbl 2013-02-26 18:18:13

包含div邊距或填充的CSS流體佈局導致溢出

回答

相關問題