html - 相对位置内的绝对位置，元素超出父级的宽度？

Question

请参考小提琴：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>

Answer 1

div 超出父级的原因是有一个widthof100%并且left被分配了默认值（'auto'） - 在这种情况下是20px由于padding. 所以将在父容器之外div流动。20px

要阻止这种情况发生，您可以设置left: 20px和right: 20px（与填充相同）并删除width: 100%