如何將絕對定位的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％？

回答

相關問題