响应式图库：重叠的标题不会排列图像的边缘

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类的宽度。其中有填充来创建列排水沟。

Answer 1

的解这对现在的位置边距值

对于这一点，使用负（ - ）在上边距象素定位

<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; 
}