响应式图库：叠加的字幕不会与图像边缘对齐

Question

我正在使用 twitter-bootstrap 构建一个简单的响应式图库。

我想要在图像上叠加显示说明。它们应该与每张图片的右下角对齐。

我无法让它们对齐，它们超出了图像的边缘。

HTML

    <div class="container">

<div class="row ">
  <ul>

        <li class="col-md-8 image">
          <img class="img-responsive" src="http://i.imgur.com/1llTChm.jpg" width="940px" height="627px" />
          <div class="desc">
            <h2>Caption text here</h2>
          </div>
        </li>
  </ul>
</div>

CSS

    ul {
  list-style-type: none;
  }

img {
  padding-bottom: 20px;
}

div.desc{
    background-color: #000;
    bottom: 0;
    color: #fff;
    right: 0;
    opacity: 0.5;
    position: absolute;
    width: 80%;
    padding: 0px;
}

.image {
  width:100%;
  padding:0px;
  }

你可以在这里看到一个例子，虽然由于嵌入在 jsfiddle 上，它似乎正在切换到小屏幕模式：

但您仍然可以看到标题如何超出图像边缘。

我希望字幕与图像边缘对齐。

据我所知，字幕与 twitter-bootstraps .col-md-8 class 的宽度对齐。其中有填充以创建列间距。

Answer 1

这个问题的解决方案是放置边距值

为此，使用Margin-top中的负(-)像素来定位

    <div class="container">

<div class="row ">
  <ul>

        <li class="col-md-8 image">
          <img class="img-responsive" src="http://i.imgur.com/1llTChm.jpg" width="940px" height="627px" />
          <div class="desc">
            <h2>Caption text here</h2>
          </div>
        </li>


      <li class="col-md-4 image">
        <img class="img-responsive" src="http://i.imgur.com/1llTChm.jpgg" width="940px" height="627px" />
        <div class="desc">
          <h2>Caption text here</h2>
        </div>
      </li>

      <li class="col-md-4 image">
        <img class="img-responsive" src="http://i.imgur.com/1llTChm.jpg" width="940px" height="627px" />
        <div class="desc">
          <h2>Caption text here</h2>
        </div>
      </li>
  </ul>
</div>

<div class="row">
  <ul>
      <li class="col-md-4 image">
        <img class="img-responsive" src="http://i.imgur.com/1llTChm.jpg" width="940px" height="627px" />
        <div class="desc">
          <h2>Caption text here</h2>
        </div>
      </li>
      <li class="col-md-4 image">
        <img class="img-responsive" src="http://i.imgur.com/1llTChm.jpg" width="940px" height="627px" />
        <div class="desc">
          <h2>Caption text here</h2>
        </div>
      </li>
      <li class="col-md-4 image">
        <img class="img-responsive" src="http://i.imgur.com/1llTChm.jpg" width="940px" height="627px" />
        <div class="desc">
          <h2>Caption text here</h2>
        </div>
      </li>
  </ul>
</div>

CSS:

ul {
 list-style-type: none;
 }

img {
 padding-bottom: 20px;
} 
div.desc{
    background-color: #000;
 margin-top: -72px; /*This do the Trick*/
color: #fff;
opacity: 0.5;
width: 80%;
}
.image {
 width:100%;
 padding:0px;
}

响应式图库：叠加的字幕不会与图像边缘对齐

Responsive Gallery: overlayed captions will not line up to edges of images

gallery

caption

twitter-bootstrap