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

此解决方案的位置边距值

为此，在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;
}

自适应图库：叠加的图片不会排列到图像的边缘

1 个答案: