如何将绝对定位的div的宽度设置为其父项的100％？

给出下面的代码如何将绝对定位的div的宽度设置为其父项的100％？

<!DOCTYPE html> 
<html> 
    <head> 
    <title>show stats</title> 
    <style> 
    span.main { 
     position:relative; 
     display:inline-block; 
    } 
    div.stats { 
     position:absolute; 
     bottom:50px; 
     background:black; 
     color:white; 
     padding:0px 15px 0px 15px; 
     font-weight:500; 
    } 
    </style> 
    </head> 

    <body> 

    <span class="main"> 
     <img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/> 
     <div class="stats"> 
     <p>this is a caption</p> 
     </div> 
    </span> 
    <span class="main"> 
     <img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/> 
     <div class="stats"> 
     <p>this is a caption</p> 
     </div> 
    </span> 
    <span class="main"> 
     <img src="http://i.imgur.com/o2udo.jpg" alt="test" title="testpic"/> 
     <div class="stats"> 
     <p>this is a caption</p> 
     </div> 
    </span> 

    </body> 

</html>

我想使div.stats含span.main的宽度。将宽度设置为100％不起作用，因为生成的宽度超出容器宽度的填充量（30px）。

我可以通过将div.stats的填充设置为0，然后填充此div内的段落来修复它。这似乎工作，但我怀疑我这样做的方式是愚蠢的。有没有一种更清洁的方式来将这个div放在它的容器宽度上，同时保持它的垂直位置？

来源

2011-12-08 jela

添加left:0和right: 0到div.stats：

div.stats { 
    position:absolute; 
    bottom:50px; 
    background:black; 
    color:white; 
    padding:0px 15px 0px 15px; 
    font-weight:500; 
    left: 0;  /*Add this*/ 
    right: 0;  /*Add this*/ 
}

的jsfiddle：http://jsfiddle.net/sT9vA/1/

来源

2011-12-08 00:51:59

如何将绝对定位的div的宽度设置为其父项的100％？

回答

相关问题