html - 放置 div 标签不起作用

Question

我正在处理我的作品集。我这里有这个页面:

第一张图片上有日期。我想要底部的文本，如下所示:

但我无法放置该文本。每次我添加一个 div 标签并在文本中设置时，它都会超出图片范围。我猜它是一个 div 标签，必须在某处？

<div class="portfolio logo" data-cat="logo">
   <article class="block-thumbnail">
   <a href="#" class="block-thumb">
      <div class="date">
         <span class="day">10</span>
         <span class="month">aug</span>
         <span class="month">2016</span>
      </div>
   </a>
   <div class="portfolio-wrapper">
      <div class="portfolio-hover">
         <div class="image-caption">
            <div class="col-md-4 col-sm-6 col-xs-12">
               <h2>link</h2>
            </div>
         </div>
         <a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
      </div>
   </div>
</div>

Answer 1

如果我们谈论的是 h2 元素，则该 html 标记位于默认情况下隐藏的元素内，并且仅在悬停时出现。

我会把它移到 .image-caption div 之外

    <div class="portfolio-wrapper">
        <div class="portfolio-hover">
            <div class="col-md-4 example col-sm-6 col-xs-12">
                 <h2>link</h2>
            </div>
            <div class="image-caption">
            </div>
            <a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
        </div>
    </div>

并赋予它这些样式

 .example {
        position: absolute;
        bottom: 0;
        z-index: 1;
        text-align: center;
        left: 0;
 }

调整 bottom 和 left 值以匹配您的设计定位