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

Question

我有一个jsfiddle，其中最外层包装div具有100%的宽度。我想创建内部div(tb_margin或tb_padding)，其内容应该从左边开始40px。我尝试了边距和内边距来创建这个40px的左间距，但在这两种情况下，实际的div由于宽度100%而延伸到右侧。

我希望标签包含在一个div (tb_margin或tb_padding)中，该div距左侧偏移量为40px，但应该拉伸到全宽度，直到右边框。

我不想在(tb_margin或tb_padding)中设置overflow:hidden，因为如果这样做，如果有太多的制表符，制表符将被隐藏。理想情况下，制表符应该换行到(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

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

Answer 2

您想要实现的最简单的方法是在边缘或填充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>