Question

给出以下代码

<!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放在其容器的宽度上，同时保持其垂直位置？

Answer 1

将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/

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

1 个答案: