html - 右边距宽度 100%

Question

我有一个包含图像的 DIV 和第二个 DIV。父 DIV 设置为 position: absolute; 子 DIV 设置为 position: relative。我的想法是在图片上方显示我的照片说明。

子 DIV 应该有父级的 100% 宽度，在左边、右边和底部减去 10px，加上黑色背景.

.article-container {
  position: relative;
}

.photo-caption {
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}

<div class="span15 article-container">
  <img src="images/example-image-1.png" />
  <div class="photo-caption">This is the subtitle text on top.</div>
</div>

左边距使 .photo-caption 超出了 .article-container 的范围。右边距似乎没有任何作用。

我也试过用 box-sizing 来解决这个问题。它似乎将 .photo-caption 的宽度降低到父宽度，但仍然有悬垂。

Answer 1

最好删除 width:100%。像这样写:

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }