1

親切にフィドルを参照してください：http：//jsfiddle.net/ukzKT/8/。

内側のdiv＃this-bottomを下に残したいのですが、幅は他のdivと同じにする必要があります。つまり、親div#topのパディング領域内にとどまる必要があります。

CSS

#top{
    width:300px;
    position:relative;
    padding:20px;
    border:1px solid #222;
}
#this-bottom{
    position:absolute;
    bottom:0;
    border:1px solid #333;
    right: 18px;
    left: 20px;
}
#other{
    width:100%;
    border:1px solid #333;
}

HTML

<div id='top'>
    <div id='other'>
        This is 1 <br />
        THis is 2 <br />
        This is 3 <br />

    </div>
    <div id='this-bottom'>
        This should be bottom
    </div>
</div>
4

1 に答える 1

6

divが親の外に出る理由は、がありwidth、100%デフォルトleft値（'auto'）が割り当てられているためです。この場合は。が20px原因paddingです。したがって、は親コンテナの外にdiv流れます。20px

これが起こらないようにするには、（パディングと同じように）設定left: 20pxしright: 20pxて削除しますwidth: 100%

于 2012-05-14T14:59:41.193 に答える