2

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

我希望标签包含在一个 div（tb_margin 或 tb_padding）中，它从左侧偏移 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 框布局更直观，或者我错过了什么

4

2 回答 2

4

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-26T18:05:03.110 回答
2

您尝试实现的最简单的方法就是不在width: 100%边距或填充的 div 上指定。默认情况下，所有 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-26T18:13:12.113 回答