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

调整底部和左侧值以匹配设计的定位

Answer 2

你必须为你的图片标题类创建一个css，它将处于绝对位置，这意味着它可以与其他东西发生冲突。这可以帮助您：Position absolute but relative to parent。然后确保你的z-index正确，所以它不在图像后面

div标签的放置不起作用

2 个答案: