包含div边距或填充的CSS流体布局导致溢出

Question

我有一个jsfiddle其中最外层包装div具有100％的宽度。我想创建内部div（tb_margin或tb_padding），其内容应从左侧开始40px。我尝试使用margin和padding来创建这个40px的左空格，但在这两种情况下，由于宽度为100％，实际的div伸出右侧。

我希望制表符被包含在一个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盒子布局更加直观的，还是我失去了一些东西

Answer 1

为您所想要达到的最简单的方法就是不指定的保证金或填充的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> 

Answer 2

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