保证金权利在宽度上突破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;
            }

Answer 2

绝对定位的元素被定位为top,left,right和bottom,不与margin.

Answer 3

问题是width=100%会给出photo-caption精确的宽度article-container; 添加边距(或填充)不会影响宽度计算.您可以使用css自己完成此操作,calc()以便样式变为:

.photo-caption  {
    width: calc(100% - 20px); // 20 = right margin + left margin
    background-color: black;
    position: absolute;
    bottom: 0px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

请注意,您可能需要在此处检查calc()浏览器支持