1

私は 3 つの div を入れ子にして、それぞれを持っていることにうんざりしています。各親が子よりも 10 ピクセル大きく、水平幅が変更されたときに応答するように表示する必要があります。2 つの DIV でこれを行うと、すべてがうまく機能します。

CSS

#holder
{
 margin:auto;
 width:90%;
 height:150px;
 background-color:#999;
 padding:10px;
 border: 1px solid;
}
#inside
{
 position:relative;
 width:100%;
 height:100%;
 background-color:#9F0;
 border: 1px solid;
}

HTML

3 番目の子を追加すると、すべてがうまくいかなくなります。真ん中の子 (緑色のボックス) は、その親から部分的に移動します。

CSS

#holder
{
 margin:auto;
 width:90%;
 height:150px;
 background-color:#999;
 padding:10px;
 border: 1px solid;
}

#inside
{
 position:relative;
 width:100%;
 height:100%;
 background-color:#9F0;
 border: 1px solid;
 padding:10px;
}

#header
{
 position:relative;
 width:100%;
 height:100%;
 background-color:#C00;
}

HTML

<div id="holder">
 <div id="inside">
     <div id="header"/>
    </div>
</div>

私はパディングとマージンを理解しており、それらがボックスの「実際の」幅と高さを追加することを理解していますが、これらのボックスを互いに内側に配置する方法がわかりません。私が試したことは以下のとおりです

  1. マージンとパディングで遊ぶ
  2. 子ボックスの幅の異なる % で遊んでいます。これはある程度は機能しますが、ブラウザ ウィンドウの幅に応じて、子の間の距離の比率が変わります。
4

1 に答える 1

0

カスケードタイプのコメントリストのように聞こえます。

ええと...＃insideと#headerから幅を削除します。DIVはブロックレベルの要素です。

追加

#holder div {
    padding-left: 10px;
}

#holderの下のすべてのDIVはpadding-leftcssプロパティを継承します。私はそれがあなたが探していたものだと思います（そして希望：P）。

于 2012-09-06T15:11:32.803 に答える