相对位置内的绝对位置，元素是否超过父宽度？

请参阅小提琴：http://jsfiddle.net/ukzKT/8/。相对位置内的绝对位置，元素是否超过父宽度？

我想内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>

来源

2012-05-14 shahalpk

你为什么想到这个问题时，你有没有CSS定义？ –

@Diodeus对不起（错误的小提琴）。现在检查。 – shahalpk

@ShahalTharique那里与你的CSS没有问题，这是正常的，它越过母公司宽度，becasue你正在使用'填充：20;' – mgraph

股利而来的父母之外的原因是存在的100%和left一个width被分配默认值（”自动'） - 在这种情况下，由于padding，这是20px。因此，div将在父容器外面流动20px。

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

来源

2012-05-14 14:59:41

实际上这不是一个猜测;）只要你没有定义4个方向中的任何一个，就采用元素的原始值。 – Christoph

@Christoph - 谢谢你，你是正确的，我已经更新了我的答案 –

，我爱你！谢谢。 – pootzko

相对位置内的绝对位置，元素是否超过父宽度？

回答

相关问题