2

最も外側のラッパー div の幅が 100%のjsfiddleがあります。内容が左から 40px で始まる内部 div(tb_margin または tb_padding) を作成したいと考えています。この 40 ピクセルの左間隔を作成するために、マージンとパディングの両方を試しましたが、どちらの場合も、実際の div は幅 100% のために右側からはみ出しています。

タブを a div (tb_margin または tb_padding) に含める必要があります。これは左から 40 ピクセルのオフセットですが、右の境界線まで幅いっぱいまで伸ばす必要があります。

タブが多すぎるとタブが非表示になるため、overflow:hidden を (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 に答える