Html 如何使跨度捕捉到div的底部（多个div）

我有代码，我需要创建三个相互下面的图像，文本跨度。 问题是，相对于每个图像，我不能为每个图像设置“top”值（例如，所有图像的高度都是150px，所以每个跨度的“top”值都是130px，而不是130、290等等……） 我的HTML代码：

<div class="obrazekvmenu" style="float:left; margin-bottom:10px; left:-2px;">
<a href="#">
<img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;"/></a>
<span class="photoh20"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;"><a class="photoa" href="#" rel="bookmark">MSI</a></h2></span>
</div>
<div class="obrazekvmenu" style="float:left; margin-bottom:10px; left:-2px;">
<a href="#">
<img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;"/></a>
<span class="photoh21"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;"><a class="photoa" href="#" rel="bookmark">MSI</a></h2></span>
</div>

JS Fiddle链接：

试试这个

<div class="obrazekvmenu" style="float:left; margin-bottom:50px; left:-2px;">
<a href="#">
 <img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;" />
</a>
<span class="photoh20"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;">
 <a class="photoa" href="#" rel="bookmark">MSI</a></h2>
</span>
</div>
<div class="obrazekvmenu" style="float:left; margin-bottom:10px;    left:-2px;">
<a href="#">
 <img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;" />
</a>
<span class="photoh21"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;">
<a class="photoa" href="#" rel="bookmark">MSI</a></h2>
</span>
</div>

---

我希望这将帮助您解决您的问题

而不是使用“最高利润：-50px；”。

<div class="obrazekvmenu" style="float:left; margin-bottom:50px; left:-2px;">
<a href="#">
 <img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;" />
</a>
<span class="photoh20"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;">
 <a class="photoa" href="#" rel="bookmark">MSI</a></h2>
</span>
</div>
<div class="obrazekvmenu" style="float:left; margin-bottom:10px;    left:-2px;">
<a href="#">
 <img class="obrazekvmenu" src="https://asset.msi.com/global/picture/image/feature/multimeda/mouse/DS300/ds300Banner.jpg" style="display:inline-block; width:440px; height:185px;" />
</a>
<span class="photoh21"><h2 class="entry-title" style="margin-top: 8px; margin-bottom: 8px; margin-left: 16px;">
<a class="photoa" href="#" rel="bookmark">MSI</a></h2>
</span>
</div>

.obrazekvmenu:hover > .photoh20 {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(51,    52, 51, 1));
 }
.obrazekvmenu{display:block}
.obrazekvmenu:hover > .photoh21 {
 background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(51, 52, 51, 1));
 }

 span.photoh20 {
 text-shadow: 2px 2px black;
 }

 span.photoh21 {
 text-shadow: 2px 2px black;
 }

 .sidebarimage {
  top: -3px;
  }

  span.photoh20 {  
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(51, 52, 51, .7));
  width: 103.338%;
  }

 .obrazekvmenu {
  width: 310px;
  height: 185px;
  }

  span.photoh21 { 
   background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7), rgba(51, 52, 51, .7));
   width: 103.338%;
  }